css的概述

发布网友 发布时间：2022-05-13 12:01

我来回答

共2个回答

懂视网 时间：2022-05-13 16:22

1 语法规范：

每个样式规则有两个部分：选择器和样式声明

2 CSS规则特性：继承性，层叠，后定义样式优先：

3 CSS选择器

4.1 元素选择器：选择所有同名的元素

4.2 类选择器：元素中可以定义相同的类，同时类选择器通常和id选择器互补共用

4.3 id选择器：元素选择器中可以定义不同的id，id选择器保持元素个性

4.4 派生选择器：根据上下级关系选择元素

4.5 伪类选择器：元素的不同状态，用于相应鼠标滑动事件

4.6选择器分组，不同id的选择器用逗号隔开

index.html源码：

 退出此处显示 id "navi" 的内容此处显示 class "main" 的内容此处显示 class "operate" 的内容此处显示 id "data" 的内容此处显示 id "pages" 的内容 
版权所有©加拿大达内IT培训公司

index.css

/*元素选择器：选择所有同名的元素*/div{ border:2px solid blue; margin:0 auto; }/*id选择器*/#header{height:61px; text-align:right}#navi{width:100%;height:91px;}#main{width:950px; height:410px; border:5px solid#8ac1db}#footer{height:50px; }/*类选择器补充不同的样式*/.subdiv{width:910px;}#operate{height:30px}#data{height:340px}#pages{height:28px}/*选择器分组，临时发现个别元素具有相同的属性*/#header,#footer{width:960px}#header a{  text-decoration:none  color:blue;  line-height:61px /*行高等于容器高度*/ }/*选择器派生：根据上下级关系选择元素时*/#footer p{text-align:center}/*伪类：元素的不同状态*/#header a:hover{ font-size:20px}/*鼠标滑过*/#header a:active{ color:red}/*鼠标按下时候*/

程序截图：

5其他的样式：

其他的小细节：1如果需要设置容器内部垂直居中，小技巧是：设置行高等于容器高度，例如 line-height:61px /*行高等于容器高度*/

2如果需要相应鼠标事件，一般用伪类，并且hover，action这两个经常用，例如：/*伪类：元素的不同状态*/ #header a:hover{ font-size:20px}/*鼠标滑过*/ #header a:active{ color:red}/*鼠标按下时候*/

热心网友 时间：2022-05-13 13:30