css
1.css书写位置
内部样式表
<head>
<style type="text/css">
选择器 {属性1:属性值1;属性2:属性值2}
</style>
</head>
行内式
<div style="width:400px;height:300px"></div>
<div width="400px" height="300px"></div>
外部样式表(引入)
<head>
<link href="css文件的路径" rel="stylesheet"/>
</head>
2.css选择器
标签选择器
<style>
h1 {
font-size:25px;
color:red;
}
</style>
类选择器(.)
<style>
.mydiv {
width:300px;
height:200px;
background-color:pink;
}
</style>
<div class="mydiv"></div>
多类名选择器: 用空格隔开
<div class="mydiv mydiv1 mydiv2">
ID选择器(#)
<style>
#mydiv {
width:300px;
height:200px;
background-color:pink;
}
</style>
<div id="mydiv"></div>
类选择器和Id选择器的区别:类选择器好比人的名字,是可以重复使用的,而id好比身份证号是唯一的,只能使用一个
它两最大的区别在于使用次数上
通配符选择器
*{
margin:0;
padding:0;
}
3.css字体样式属性
font-size:25px;(字体大小)
font-family(字体)
p{font-family:"微软雅黑"}
font-weight(字体粗细) 400===normal 700===bold
font-style(字体风格) normal/默认值,浏览器会显示标准的字体样式
italic/浏览器会显示斜体的字体样式
font:综合设置字体样式(重点)
选择器{font:font-style font-weight font-size/line-height font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
4.css外观属性
color:文本颜色(red/#ccc/rgb(255,0,0))
line-height:行间距
text-align:设置文本内容水平对齐 center:居中 left:左对齐(默认值) right:右对齐
text-indent:首行缩进 (text-indent:2em 首行缩进两个汉字)
text-decoration 文本装饰 none:没有下划线 underline:下划线
5.css复合选择器
交集选择器(并且)
交集选择器由两个选择器构成,第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
h3.class{color:red;font-size:25px;}
p.one 选择的是 类名为.one 的段落标签
并集选择器:用逗号隔开
.one ,p,#test{color:#ccc;}
后代选择器:用空格隔开
.class p{color:#ccc;}
子代选择器:用>连接
.demo >h3 {color:red;} 说明h3一定是demo的亲儿子
伪类选择器(伪类用的是两个点 冒号 :link{})
链接伪类选择器
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标经过时
:active 选定的链接