【入坑前端第四天】—— 零散日记_欢迎来到我的世界

大大的周 02-07 3535

初识CSS 定义：层叠样式表，也叫级联样式表，简称样式表作用：给元素添加样式一、样式表分类:

内部样式表、外部样式表、行内样式

1. 内部样式表 \color{burlywood}{1.内部样式表} 1.内部样式表在head标签内部写style标签，然后通过css的语法，"属性名：属性值;"的形式为元素添加样式。选择器 { 属性名:属性值; 属性名:属性值; ... ... }

blackground-color : 背景颜色 color : 字体颜色 width : 宽度 height : 高度

所有块级元素，以及行内元素中的img与input可以设置宽和高 2. 外部样式表 \color{burlywood}{2.外部样式表} 2.外部样式表

将元素样式的保存到一个独立的css文件中（注意：在css文件的第一行要添加上@charset “utf-8”），然后在html页面的head的标签中通过link标签引入外部样式表

选择器的类型：元素选择器、id选择器、类选择器通配符选择器、子代选择器、后代选择器、群组选择器、伪类选择器

1. 元素选择器 \color{chocolate}{1.元素选择器} 1.元素选择器

应用：为某一类元素添加样式

p { 样式设置 } body {样式设置} div {样式设置} 2. i d 选择器 \color{chocolate}{2.id 选择器} 2.id选择器

应用：通过#和id名为页面中的大版块添加样式(不常用)

<div id = "blink"> 这是一个测试 </div> /*写在style标签中的部分如下：*/ #blink{样式设置} id选择器使用时一般是应用于某些大的版块，不会应用于小版块id与类名的命名规则：以小写字母开头，包含字母、数字、- 、_ 。id的命名具有唯一性，不能出现重复 3. 类选择器 \color{chocolate}{3.类选择器} 3.类选择器

应用：通过.类名，为元素设置样式(常用)

<div class = "类名一类名二类名三"> /*写在style标签中的部分如下：*/ .类名{元素样式} 每一个元素都可以设置类名，类名可以重复对于同一个元素可以设置多个类名，多个类名之间用空格隔开在style标签中一般通过.类名来调用，也可以通过标签名.类名调用【不同之处会影响选择器的权值】 4. 通配符选择器 \color{chocolate}{4.通配符选择器} 4.通配符选择器

应用：为页面中所有元素去掉边距

/*写在style标签中的部分如下：*/ *{ margin : 0; dopping : 0 ; } margin 代表内边距、dopping 代表外边距这种将边距初始化为0的操作比较常用 5. 子代选择器 \color{chocolate}{5.子代选择器} 5.子代选择器

应用：使用>作为连接符，前后为父子关系，可以统一的更改指定父元素中的所有子元素的样式

<div class = "cup"> <ul class = "milk"> <li>原味奶茶</li> <li>珍珠奶茶</li> <li>香芋奶茶</li> <li>红豆奶茶</li> </ul> </div> /*写在style标签中的部分如下：*/ <style> .milk > li{ width:200px; height:200px; background-color: cyan; color:blueviolet; } </style>

当多个被包含的元素相同时，为他们定制样式如果都要起相同的类名很不方便。就可以选择子代选择器，为他们的父类起一个类名，通过包含标识符 “>” 子代标签，进而代替为只为其父标签起类名。

可以写多级父类的类名，也可以直接用子类的直接父类即可。例如：.cup.milk > li 可以直接写成 .milk > li使用>作为连接符，前后为父子关系，可以统一的更改指定父元素中的所有子元素的样式 6. 后代选择器 \color{chocolate}{6.后代选择器} 6.后代选择器

应用：也是为子代元素添加样式，前后满足祖先后代即可，中间用空格分开

<div class = "cup"> <ul class = "milk"> <li>原味奶茶</li> <li>珍珠奶茶</li> <li>香芋奶茶</li> <li>红豆奶茶</li> </ul> </div> /*写在style标签中的部分如下：*/ <style> .cup li{ 属性名:属性值; 属性名:属性值; ... ... } </style> 但是需要注意：这种操作会使cup中包含所有li元素都设置相同的样式；如果要为某些li元素设置单独的样式，则不推荐使用这种选择器，应该通过单独起类名的方式类完成。 7. 群组选择器 \color{chocolate}{7.群组选择器} 7.群组选择器

应用：为多个元素样式相同的元素一起添加样式，彼此之间用逗号分开

应用：设置一些特定的元素样式

hover ??鼠标移入效果 active ??为鼠标按下瞬间效果 visited ??为点击后的样式 link ??为鼠标未点击前的样式

参考下面的伪类选择器： .list li:hover{ cover:#123456; } 更多伪类选择器参考：伪类选择器大全 9. 选择器的权值 \color{chocolate}{9.选择器的权值} 9.选择器的权值在一般情况下，使用后代选择器为某种元素设置统一的样式后，如果想为某个子元素设置单独样式（在整体样式中未定义的属性）是可以的，可以通过为这个元素设置一个单独的类名，在head标签中的style标签中进行元素样式设置。 <style> .grandfather li{ width:200px; height:200px; backgroud-color:green; } .son{ color:red; } </style> <div class = "grandfather"> <ul> <li>son_one</li> <li>son_two</li> <li class = "son">son_three</li> </ul> </div> 但是如果设置的单独样式和之前已经定义过的样式发生了冲突，就可能导致后来设置的样式不起作用，这就涉及到了选择器的权值问题。默认选择选择器的权值情况：

元素选择器 1 类选择器 10 id选择器 100 行内样式 1000 可手动更改权值 !important

选择器权值的计算方法：除群组选择器之外，其它选择器都是将各个选择器权值加和即可；群组选择器要想对应的各个选择器分别计算权值。当属性冲突时，会以权值大的为准；当权值相同时，以最新的定义为准当手动更改某个属性的权值时，只需要在这个属性后、分号前添加!important即可，无需设置数值，系统会默认将这是属性认为是在相同属性中权值最高的