【CSS01】CSS概述，使用样式的必要性，CSS语法及选择器

news2024/11/14 13:57:33

文章目录

- - - 一、什么是样式
    - 二、使用样式的必要性
    - 三、使用样式的几种方式
    - 四、CSS基本语法：
    - 五、CSS的注释
    - 六、CSS选择器——重点
    - 相关单词

一、什么是样式

概念：

Cascade [kæˈskeɪd] Style Sheet [ʃiːt] 级联样式单/表，层叠样式表

CSS有化腐朽为神奇的力量，掌握了CSS后在页面美化方面能限制住你的只有想象力。

看到页面感觉很复杂，那是不是学习CSS也很难呢？其实CSS类似于HTML是标记语言一样，没有逻辑运算等。

二、使用样式的必要性

1、随着内容越来越多，已经不适合将内容和表现混合在一起，为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）,1996年推出css1,1998年推出CSS2，目前是css3

2、用来表示网页的外观

3、为了解决内容与表现分离的问题

三、使用样式的几种方式

1、内联样式(inline)：使用style属性声明在元素中

<div style="属性：属性值"></div>

注意：只对当前元素有效

2、内部（内嵌）样式(inner)：

    <head>
        <style type="text/css">...</style>
    </head

注意：对当前页面有效

3、外部（外链）样式(outer)：创建一个独立的.css文件

    <head>
      <link rel="stylesheet" type="text/css" href="x.css"/>
    </head>

<link> 标签定义文档与外部资源的关系。

rel属性规定当前文档与被链接文档之间的关系。只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。

type属性规定被链接文档的 MIME 类型。

注意：外部样式对所有引用它的页面都有效(可用于控制全站的风格)

4、引入样式

可以放置在内部样式或者外部样式中

    @import url(style.css)

注意：不建议使用

使用原则：

内联样式尽量少用；
内部样式可以适量使用(全站中只有一个页面中使用的样式)；
推荐使用外部样式(外部文件不要太多)

四、CSS基本语法：

选择器 { 语句声明; 语句声明2; ... 语句声明n }
/*备注:*/
语句声明=属性:属性值;

css语法

使用花括号包围，多条声明语句需要使用分号隔开，最后一个可以不用。

例子：

h1{ color:red; font-size:14px;}

1、内联样式写法：

 <h1 style="color:red; font-size:14px;">我是一只小小鸟</h1>

2、内部/外部CSS写法

选择器{
    属性名: 属性值;
    ...	
    属性名: 属性值;
}
/*例子：*/
h1{ 
    color:red; 
    font-size:14px;
}

注意：

选择器需要区分大小写，而属性和属性值不需要
空格会被忽略
值为若干单词，则要给值加引号(主要是字体样式)

选择器命名规范：

只能以数字，26个英文字母(a-z,A-Z)，和—、_来命名，而且理论上也不能以数字、下划线减号开头

五、CSS的注释

单行多行均使用一种注释方式：

  /*这里是注释*/

六、CSS选择器——重点

选择器的本质：选择XX标签做XX事情。

什么是选择器：表示CSS允许你通过标签的标签名、属性名来选择某些HTML，并对他们进行操作，也就是选择什么做什么事情。

常用的基本选择器（在学习CSS3时会接触更多）：

通配符选择器

写法：*{...}

含义：选择页面中的所有元素

举例：

*{
    color: red;
}

标签选择器

写法：元素名{...}

含义：选择指定的元素如div{…}

举例：

div{
    color: red;
}

ID选择器

写法：#ID值{...}

含义：仅选择具有指定ID的元素如#p2{…}

举例：

#p2{
    color: red;
}

类别选择器

写法：.类名{...}

含义：选择具有指定class的所有元素 .mark{}

举例：

.bgpink{
    background-color: #FBD1D1
}

过滤选择器

写法：选择器1选择器2{...}

含义：选择可被两个选择器同时选定的元素如p.mark{…} 或 .product.mark{…}

举例：

/*过滤选择器，表示该元素必须都要包含指定的选择器*/
#font2.box{
    color: red;
}

后代选择器(父子选择器)

写法：选择器1 选择器2{...}

含义：选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素如div span{…} .product .mark{…}

举例：

.block p{
    /*表示选中block下的所有的p元素*/
    color:red;
}

直接子元素选择器

写法：选择器1>选择器2{...}

含义：选中选择器1中的直接子元素中可被选择器2选中的如div > span{…}

举例：

.block > p{
    /*block下的所有的子元素p*/
    color:red;
}

并列选择器

写法：选择器1,选择器2,...选择器n{...}

含义：选择可被任何一个选择器选中的元素 h2,#main,.mark{…}

举例：

/*并列选择器*/
#font1,#font2,#font3,#font4{
    font-size: 14px
}

伪类选择器

/*
理论上任何元素都可以设置则4种状态
主要用于给a链接设置4种不同的状态的样式
角色相当于是类别选择器，只是在特定的场景下才会起作用，有如下四个
*/
:link{
    样式规则
}
:visited{
    样式规则
}
:hover{
	样式规则
}
:active{
    样式规则
}
/*
要按照以上的书写顺序来
记忆口诀：爱恨原则  lv ha
*/