标签：
类选择语法如下:
.类选择器名称{
属性名:属性值;
}
多个属性名:属性值以分号隔开
导入到html文件的cc文件，方法如下
1:
在<head>。。</head>之间使用
<line href=‘path‘type=‘text/css‘ rel="stylesheet"/>
导入之后使用方法如下:
<span class=名称>
例子:
css文件
.str1{
font-size: 20px;
background-color: salmon;
font-weight: bolder;
}
html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="css01.css"type="text/css" rel="stylesheet">
</head>
<body>
<span class="str1">星期1</span>
<span class="str1">星期2</span>
<span class="str1">星期3</span>
</body>
</html>
id选择器语法
#id选择器名{
属性名:属性值;
}
css文件
#str2{
font-size: 40px;
background-color: sienna;
}
html部分文件
<span id="str2">这是星期5</span>
html选择器语法:
html选择器名{
属性名:属性值;
}
body{属性名：属性值;}
当同一个元素被id,html，类选择器同时修饰时，结论是:选择器优先级:id>类>html>通配符
案例:
/*颜色为黑色并且无下划线*/
a:link{color: black;
text-decoration: none;}
/*鼠标经过变成红色*/
a:hover{text-decoration: underline}
/*点击之后变成红色*/
a:visited{color: red}
通配符选择器
*{属性名:属性值;}
*{margin:0;padding:0}
外边距和内边距
写法
*{ /*margin: 0px;*/
margin-top: 0px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 10px;
padding: 0px; }
另一种写法
margin: 10px 0px 0px 10px;/*方向是从顺时针 上右下左*/
margin: 10px 0px 0px;/*如果给出三个值，则表示 10px表示上，左右，下*/
父子选择器
语法
#父选择器 子选择器{属性名：属性值;}
#id选择器名 html标签{属性名：属性值;}
例子
/*父子选择器*/
#str2 span{ font-size: 30px; color: blue; }
<span id="str2">这是一则<span>很重要的</span>新闻</span>
父子层级<span id="str2">这是一则<span>很<span>重</span>要的</span>新闻</span>
#str2 span span p{ font-size: 100px; color: darkorange; }
<span id="str2">这是一则<span>很<span>重</span><p>要</p>的</span>新闻</span>
父子选择器：可以是多层的，也可以有id选择器和类选择器
.str3{font-size: 200px;color: blue} #
str4{color: darkorange;font-size: 200px}
<span id="str4" class="str3">很不错的样子</span>
只能选择其中一种
.str3,#str4{font-size: 100px;color: blue}
.str3,#str4 span{font-size: 500px;}
<span id="str4" class="str3"><h1>很不错</h1>的样子</span>
.str3,#str4 span h1{font-size: 50px; color: black}
当一个元素被id,类选择器同时修饰时，id选择器优化级大于类选择器
一个元素中最多可以有一个id选择，但可以有多个类选择器
例子
<span id="_str5"><a href="#" >星期天</a></br></span>
#_str5{color: darkslategray;text-decoration: underline}
.str5{text-decoration: underline;color: black;font-size: 100px}
<span class="str5"><a href="#">星期八</a></span></br>
当类选择中，同时修改类选择器时，str1,str5的出现属性名:值冲突时, 是根据css文件中谁写的文件的最后决定的
.str5{text-decoration: underline;color: black;font-size: 100px} .
str1{
font-size: 20px; background-color: salmon; font-weight: bolder; }
<span class="str1 str5">这是星期5</span></br>
这边是str1的优先级高于str5
/*案例，出现相同部分，用下面的方式处理*/
#a{color:blue;float: left}
#b{color:red}
.c{font-size: 10px}
/*相同部分可以写成*，在写成这样情况下，可以使用以下方式写，以,分开*/
#a,#b,.c{height: 10px;width: 10px}
块元素与行内元素区别
行内元素:只占用内容的宽度，默认不会换行；一般可以存放文本和其他行内元素，比如图片，链接等
块元素：不管内容多少，也会占满整行，也会换行；可以放文本，行内元素或者块元素
<head> <title></title> <link href="css3.1.css"type="text/css" rel="stylesheet"> </head>
.s1{ background: red; }
.s2{background: gray;width: 100px}
.s3{background-color: green}
<span class="s1">hello</span>
<span class="s1">hello</span>
<span class="s1">hello</span>
<div class="s2">div world</div>
<div class="s2">div world</div>
<div class="s2">div world</div>
<span class="s3">hello world</span>
例子：
<span class="s1">
<a href="#">搜狐</a>hello</span>
<span class="s1">hello</span>
<span class="s1">hello</span>
<div class="s2">div world</div>
<div class="s2">div world</div>
<div class="s2">div <div class="s3">wor</div>ld</div>
<span class="s3">hello world</span>
块元素和行内元素可以进行转换
从行内元素转换成块元素方法如下:
<span style="display: block;" class="s1"><a href="#">搜狐</a>hello</span>
.s3{background-color: green; display: inline}
.s1{ background: red;
display: block;}/*当在css文件中编写时，所有含s1的类选择器都会指定成块元素*/
标签：
原文地址：http://www.cnblogs.com/mhxy13867806343/p/4353900.html
