css书写位置
内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表(外链式)
<head>
<link type="text/css" href="CSS文件的路径" rel="stylesheet" />
</head>
选择器
1、标签选择器(元素选择器)
eg:
h1{color:red;
font-size:200px;
}
2、类选择器
<head>
.lei{
background-color:red;
font-size:20px;
}
</head>
<body>
<div class="lei">
</div>
</body>
注:不建议使用_来为CSS选择器命名;不要纯数字、中文等命名,尽量使用英文字母来表示。
多类名选择器:
<div class="pink fontWeight font20">亚瑟</div>
注:渲染是哪个类选择器在css中写在前面,则哪个选择器在调用时先使用。
3、id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
#zhaojie{
color:red;}
<div id="zhaojie"></div>
注:id选择器和类选择器的区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的。
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复, 只能使用一次。
4、通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
这个css样式就是清除HTML标记的所有默认边距,使得页面中的边距都为0;
CSS复合选择器:复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
5、交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
p.one{
color:red;}
这样选择的是页面中类名为.one中的p标签中的内容
6、并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
eg:
.one,h1,#test{
color:green;
}
表示.one,h1,#test这三个选择器都会执行颜色为红色,通常用于集体声明。
7、后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
.class h3{
color:red;
}
类名为class中的h3标签为红色
8、子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 进行连接,注意,符号左右两侧各保留一个空格。
.demo > h3 {color: red;}
说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
9、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果
伪类选择器:以:开头
类 .one
伪类 :link
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
eg:
<style>
a:link{color:#333;
font-size:25px;
text-decoration:none;
}
a:hover{
color:red;
font-size:25px;
text-decoration:none;
}
a:active{
color:#00F;
}
a:visited{
color:#999;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>