search

Home >Web Front-end >HTML Tutorial >CSS概述<选择器总结>_html/css_WEB-ITnose

CSS概述<选择器总结>_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-24 11:31:081341browse

概述：CSS是指层叠样式表，他是定义如何显示HTML元素，样式表通常存储在样式表中,通常存储在.css文件中，下面对css的选择器进行总结，便大家夯实基础！

1 语法规范：

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

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

3 CSS选择器

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

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

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

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

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

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

index.html源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head>    <link rel ="stylesheet" href="index.css"><body><div id="header"><a>退出</a></div><div id="navi">此处显示  id "navi" 的内容</div><div class="main">此处显示    class "main" 的内容</div><div id="operate" class="subdiv">此处显示  class "operate" 的内容</div><div id="data" class="subdiv">此处显示  id "data" 的内容</div><div id="pages" class="subdiv">此处显示  id "pages" 的内容</div><div id="footer">    <p>版权所有&copy;加拿大达内IT培训公司</p></div></body></html>

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}/*鼠标按下时候*/

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：鼠标滑过链接a实现背景变色代码_html/css_WEB-ITnoseNext article：CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose

Related articles

See more