1.CSS:Cascading Style Sheets 层叠样式表
2.css1:字体、颜色
css2:分离样式 html和css分开写(class和id)
css3:圆角的属性,阴影的属性,盒子模块等等
3.css优点:提高页面浏览速度。缩短改版时间,降低维护费用。更好控制页面布局。实现表现和结构、内容相分离。更方便搜索引擎的搜索。
4.样式表分为:嵌入式样式表、外部样式表、内联样式表。
5.外部样式表:当有很多的页面都是用相同的css样式表,如果要改变颜色、字体、或者其他格式化功能,在一个样式表文件中一次改变就方便很多,这是用外部样式表会方便很多。
外部样式表的样式会放在一个单独的文件中,这个文件推荐使用.css作为拓展名。
例:一个文件css.css里的内容 .Name{height:Xpx; width:Xpx;}
在.html的文件里想引用这个样式,则在<head>段使用<link>标记,就可以将外部的样式表文件链接回来,具体输写如下
<head><link rel="stylesheet" type="text/css" href="css.css(外部文件的名)"/></head>
<body><div class="Name"> 外联样式表</div></body>
6.嵌入式样式表:在同一个网页上。<style>标签之间是样式
<head><style type="text/css"> .sheet1{ height: 50px;width: 50px;background-color: lightblue;}
#sheet2{height:100px;width: 100px;background-color: lightgrey;}
</style></head>
<body><div class="sheet1">嵌入式样式表</div>
<div id="sheet2">嵌入式样式表</div></body>
7.内联样式表:大多数html的标记都有一个style如:<h1 style="color:red;">
8.选择器:<head><style> 以下定义都是写在这里 </style></head> <body> 调用格式都是在这里</body>
a、元素选择器(类型选择器):例如:定义em{color:blue;} 调用格式<em>编辑的内容</em>
b、类选择器 :定义格式: .类名{属性:值;} 用class属性等于类名
c、ID选择器 :定义格式: #id{属性:值;} 用id属性行等于id名
d、通配符选择器:改变所有元素的样式.格式:*{color:blue}
e、伪类选择器 :格式:a:hover(常用)鼠标光标放在上面时反应的选择器/a:link 未访问是的反应/a:visited 已访问过的反应/a:active 获得焦点如被点击的链接上的选择器.
d、伪元素选择器 p:first-line{第一行的格式} p:first-letter{如段落的第一个字母}
f、包含选择器
9.选择器的特殊性值的计算方法:a:内联样式 b:id选择器 c:属性选择器包括类选择器或者伪类选择器 d:元素选择器或伪元素选择器。通配符选择器*的特殊值为0,0,0,0.
10.css属性单位:长度单位:绝对单位(cm、mm、in、pt、pc)、相对单位(px、em、ex(16px=1em=100% 1px=0.0625em=6.25%))
颜色单位:
2.css1:字体、颜色
css2:分离样式 html和css分开写(class和id)
css3:圆角的属性,阴影的属性,盒子模块等等
3.css优点:提高页面浏览速度。缩短改版时间,降低维护费用。更好控制页面布局。实现表现和结构、内容相分离。更方便搜索引擎的搜索。
4.样式表分为:嵌入式样式表、外部样式表、内联样式表。
5.外部样式表:当有很多的页面都是用相同的css样式表,如果要改变颜色、字体、或者其他格式化功能,在一个样式表文件中一次改变就方便很多,这是用外部样式表会方便很多。
外部样式表的样式会放在一个单独的文件中,这个文件推荐使用.css作为拓展名。
例:一个文件css.css里的内容 .Name{height:Xpx; width:Xpx;}
在.html的文件里想引用这个样式,则在<head>段使用<link>标记,就可以将外部的样式表文件链接回来,具体输写如下
<head><link rel="stylesheet" type="text/css" href="css.css(外部文件的名)"/></head>
<body><div class="Name"> 外联样式表</div></body>
6.嵌入式样式表:在同一个网页上。<style>标签之间是样式
<head><style type="text/css"> .sheet1{ height: 50px;width: 50px;background-color: lightblue;}
#sheet2{height:100px;width: 100px;background-color: lightgrey;}
</style></head>
<body><div class="sheet1">嵌入式样式表</div>
<div id="sheet2">嵌入式样式表</div></body>
7.内联样式表:大多数html的标记都有一个style如:<h1 style="color:red;">
8.选择器:<head><style> 以下定义都是写在这里 </style></head> <body> 调用格式都是在这里</body>
a、元素选择器(类型选择器):例如:定义em{color:blue;} 调用格式<em>编辑的内容</em>
b、类选择器 :定义格式: .类名{属性:值;} 用class属性等于类名
c、ID选择器 :定义格式: #id{属性:值;} 用id属性行等于id名
d、通配符选择器:改变所有元素的样式.格式:*{color:blue}
e、伪类选择器 :格式:a:hover(常用)鼠标光标放在上面时反应的选择器/a:link 未访问是的反应/a:visited 已访问过的反应/a:active 获得焦点如被点击的链接上的选择器.
d、伪元素选择器 p:first-line{第一行的格式} p:first-letter{如段落的第一个字母}
f、包含选择器
9.选择器的特殊性值的计算方法:a:内联样式 b:id选择器 c:属性选择器包括类选择器或者伪类选择器 d:元素选择器或伪元素选择器。通配符选择器*的特殊值为0,0,0,0.
10.css属性单位:长度单位:绝对单位(cm、mm、in、pt、pc)、相对单位(px、em、ex(16px=1em=100% 1px=0.0625em=6.25%))
颜色单位: