CSS级联样式表-css选择器

CSS概念

　　Cascading Style sheet 级联样式表

　　表现HTMl或XHTML文件样式的计算机语言

　　　　包括对字体，颜色，边距，高度，宽度，背景图片，网页定位等设定

建议：把表示样式的代码从html中分离出来，并且创建一种规则来定义html标签要显示成什么样子。

 

选择器：

　　类型选择器：不带尖括号的标签名。    如给段落标签加下划线     p{text-decoration:underline;} 可以设置多个属性

　　派生选择器：作用在某些标签的子标签上。 如只给ul 中的li标签加20px的字号 ul li{ font-size:20px;}

　　伪类选择器：在原有选择器的基础上添加一个限定的条件，当某种情况发生时在选择这个标签。如给超链接加上鼠标悬浮改变红色 ，下划线 a:hover{ color:red; 　　　　　　　　text-decoration:underline;}

　　:first-child:缩小标签的选择范围。如给ul中的第一个li标签加上红色 　　ul li:first-child{ color:red;}  只选择第一个li标签。

 1  <style type="text/css">
 2         /*超链接取消下划线，改变颜色为红色*/
 3         a{
 4             text-decoration: none;
 5             color:red;
 6         }
 7         /*当鼠标移动到a上显示下划线，改变颜色为绿色*/
 8         a:hover{
 9             text-decoration: underline;
10             color:green;
11         }
12         /*给li标签改变内链模式*/
13         ul li{
14             display: inline;
15         }
16     </style>
View Code

其中a标签还有其他的伪类选择器：

　　a:link{ } 为访问的链接，和a{}相同并且同时存在时会覆盖a{}。

　　a:hover{} 鼠标移动到超链接上时。

　　a:active{},被选定的超链接。

　　a:visited{} 已访问的超链接。

类选择器：给HTMl标签增加一个class属性，然后给class属性填写一个值，这个值叫做类型。（在类名前面加“.”）

 

 

<body>
<ul class="shihua">
    <li>中国需要你</li>
    <li>美国需要你</li>
    <li>世界需要你</li>
</ul>
<ul>
    <li>世界美好</li>
    <li>中国美好</li>
    <li>美国美好</li>
    <li>全都美好</li>
</ul>

<!--这里我把上面的ul加上了类，下面的没加，这样使用使用类选择器的时候下面的ulstyle不会改变-->
.shihua{
    text-decoration: none;
    color: #FF0000;

}
.shihua li{
    display: inline;
}

 

 

 

 

 

 

 

　　

posted @ 2018-09-23 17:47  WhiteSpace  阅读(5172)  评论(1)  编辑  收藏  举报