2021-05-22 于晓雯

目录

一、学习总结

1、CSS层叠（级联）样式表：用于设置HTML元素的样式；它由选择器和一条或多条声明组成

selector {declaraction 1;declaraction 2;.......eclaraction N}

2、声明由属性和值组成

selector {property:value;}

3、CSS常用的四种用法：

​ 1）内联样式：通过当前元素style属性指定样式（又称行内样式）；

​ 2）内部样式：通过style属性嵌入CSS样式，范围当前页面；

​ 3）外部样式表：是一个CSS文件，用link引用，rel的值为stylesheet,href的值为外部CSS文件位置；

​ 4）等级：内联样式 > 内部样式和外部样式表（如有! important提高样式等级，则有! important的样式等级最高）；内部样式与外部样式的优先级，取决于就近原则或用! important提高样式等级。

4、选择器

​ 1）标签选择器：不区分大小写；选择器与标签一致；一般是同一元素。

​ 2）class选择器：以"."开头，class属性的值自定义；严格区分大小写；多个值之间用空格隔开；可选中网页中不同元素；包含。

​ 3）属性选择器：[属性]{....};必须是显示声明了的；根据 HTML 元素的属性来选择相应的元素；

​ 4）ID选择器：以#开头；# id名称；区分大小写；必须等于指定元素；

​ 5）伪类：网页元素的状态：a.link：表示未访问；a.visited：表示访问过；a.hover：表示鼠标悬停时，其它html元素也有此状态；a.active：表示激活时；a.last-child：表示最后一个元素；a.first-chlid：第一个元素；a.nth-child(1)：表示第一个子元素；a.before：表示在元素渲染之前；a.after：表示在元素渲染之后。

​ 6）后代选择器：又称包含选择器，空格代表后代；

​ 7）子元素选择器：直接子标签适用；

​ 8）通配选择器：*，所有的元素都遵循此格式。

5、常用CSS属性

​ 1）width:value:宽，单位可以是px（像素）/%（百分比）；

​ 2）height:value:高，单位同上；

​ 注：shift+10:一次加10；ctrl+10:一次加100.

​ 3）border-width:边框粗细；border-style:边框样式（solid为默认；none为禁用）；border-color:边框颜色；border：width style color:四周边框；border-bottom:下边框；border-top:上边框；border-radius:圆角边框。

​ 4）margin：设置元素外边距；margin：0px auto：居中对齐显示，必须 为块元素；

​ 设置一个值：四周外边距；分别设置外边距：上、右、下、左须与四个值对应；若设置两个值：则第一个数为上下边距，第二个值为左右边距；如若缺省其中一个值：则与其对应边距一致；

​ 5)外边距折叠

二、心得体会

通过今天的学习，对CSS有了大致认识，就是看的时候会，做的时候就卡壳了，还是觉得理解的不够到位，总结下来问题还是挺多的，知识点太多的话容易混，也记住不，就抽时间好好练练。

三、疑难问题

1、用CSS来编辑形成各种图案时的参数变化不清楚。