CSS基础详记

最新推荐文章于 2022-08-05 08:14:02 发布

Cocorna

最新推荐文章于 2022-08-05 08:14:02 发布

阅读量355

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/mymCocorna/article/details/122596237

版权

1.CSS(cascading style sheet) 为层叠样式表,用于控制网页样式

WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。

2.css: 修饰/美化页面

(1)语法组成: 选择器{声明}

声明包含属性和属性值

选择器{属性1:属性值1;属性2:属性值2}

选择器: 修饰对象

属性: 描述对象的特征/特点

(2）css语法

1)css有选择器，选择器后面有大括号

2)大括号内写的是声明

3)声明包含属性和属性值

4)属性和属性值之间用冒号相连

5)当一个选择器有多个声明时,属性的顺序不区分前后

6)有多个属性时,第一个声明结束后面需要加上分号

7）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。

8）在书写样式过程中，空格、换行等操作不影响属性显示。

3.css的样式表创建方式:行内式/内嵌式、内部式、外部式

语法组成: 选择器{属性:属性值}

(1)行内式的创建方式

1)需要在标签的内部创建样式表

2)在标签内书写一个style属性

3)在style的属性值位置直接书写声明即可

<标签 style="属性1:值1;属性2:值2; ……"></标签>

(2).内部式的创建方式

1)需要在head标签内创建

2)在head内创建style标签

3)在style标签内书写规范的css语法即可

css语句

</style>

(3)外部式的创建方式

1)需要在外面创建一个.css文件

2)需要让html文件和css文件之间形成关联使用link标签

3)使用link元素导入外部样式表时，需将该元素写在文档头部，即<head>与</head>之间。

rel:用于定义文档关联，表示关联样式表。

type:定义文档类型。

------外部样式表的第二种引入方式

(1)@import 以导入的方式导入模块，先加载结构，后加载样式

1)需要在style标签中书写

2)@import url("路径")

@import url("目标文件的路径及文件名全称");

</style>

注: @和import之间没有空格 url和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；

(2)link 结构文件和样式文件会一起加载

(3)link @import区别

1)老祖宗的差别:link属于XHTML标签，而@import完全是CSS提供的一种方式;link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。

2)加载顺序的差别:当一个页面被加载的时候（就是被浏览者浏览的时候）,link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

3)兼容性的差别:@import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

4)使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

4、CSS样式表的优先级

1）内联样式表的优先级别最高

2）内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高(就近原则)

3）同在一个样式表中的优先级和书写的顺序也有关，后书写的优先级别高(被覆盖的只是相同属性的样式)

4）如果三种样式表同时存在时，浏览器的控制台如果有黑色的横线划掉属性属性值，表示有属性冲突。

5、CSS选择符

(1)CSS基本选择符:类型选择符、id选择符、class选择符(类选择符)

(2)CSS选择符分类:

1)类型选择符(标记选择器）

类型选择符根据html语言中的标记来直接定义

语法:标签名称 {属性:属性值；}

a)类型选择符就是以文档对象html中的标签作为选择符，即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span等。

b)所有的页面元素都可以作为选择符;

c)用法:

（1）如果想改变某个元素的默认样式时，可以使用类型选择符;(如:改变一个p段落样式）

（2）当统一文档某个元素的显示效果时，可以使用类型选择符;(如:改变文档所有p段落样式）

2)类选择符(class选择符）

语法: .class名{属性:属性值;})

用法:class选择符更适合定义一类样式；

(1)当我们使用类选择符时，应先为每个元素定义一个类名称，

(2)类选择符的语法格式:

如:<div class="top"></div>

.top{属性:属性值;}

3)ID选择符(id选择器）

语法: <标签 id=“名”></标签>

#id名{属性:属性值;}

（a）可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的id名；

如:<div id="top"></div>

（b）id选择符的语法格式是“#”加上自定义的id名

如:#box{width:300px; height:300px;}

如:div标记

(d)一个id名称只能在文档中出现一次，因为id是唯一的

(e) 最大的用处:创建网页的外围结构。(唯一性、起名字不能使用关键字)

4) 伪类选择器

:link {color: red;} /* 未访问的链接状态 */

:visited {color: green;} /* 已访问的链接状态 */

:hover {color: blue;} /* 鼠标滑过链接状态 */

:active {color: yellow;} /* 鼠标按下去时的状态 */

注:

1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:

a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；

2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

例如:a{color:red;} a:hover{color:green;}

表示超链接的三种状态都相同，只有鼠标划过变化颜色

5)通配符（*）设置全局属性

语法: *{属性:属性值;}

说明:通配选择符的写法是“*”，其含义就是所有标签,表示该样式适用所有网页元素；

用法:常用来重置样式。

例:*{margin:0;padding:0;}

6)群组选择符（集合选择器）

语法: 选择符1，……，选择符5 {属性;属性值;}

说明: 当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

实例: .top, #nav, p{width:100px;}

7)包含选择符（后代选择器）

语法:选择符1(父) 选择符2（后代）{属性:属性值;}

选择符父级选择符子级{属性:属性值;}

说明:选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

实例: div ul li{height:200px;}

6、选择符权重

css中用四位数字表示权重，权重的表达方式如:0，0，0，0；

权重规则:HTML标签(类型选择符)的权重是1，class的权重是10，id的权重是100。

类型选择符:0001

class选择符:0010

id选择符:0100

属性选择符:0010

伪类选择符:0010

伪元素（对象）选择符:0001

包含选择符的权重:包含选择符的权重之和

内联样式:1000

继承样式:0000

群组集合选择符:为自己本身

通配符:0000

注:如果权重相同时，则执行后写的样式；

7、CSS层叠性

css层叠指的是样式的优先级，当产生冲突时以优先级高的为准

（1）开发者样式>读者样式>浏览器样式（除非使用!important标记）

（2）id选择符>（伪）类选择符>元素选择符

（3）权重相同时取后面定义的样式

Cocorna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础详记

1.CSS(cascading style sheet) 为层叠样式表,用于控制网页样式 WEB标准中的表现标准语言,在网页中主要对网页信息的显示进行控制。2.css: 修饰/美化页面(1)语法组成: 选择器{声明} 声明包含属性和属性值选择器{属性1:属性值1;属性2:属性值2} 选择器: 修饰对象属性: 描述对象的特征/特点(2）css语法 1)css有选择器，选择器后面有大括号 2)大括号内写的是声明 3)声明包含属性和属性值 ...
复制链接

扫一扫