3阶段：HTML5之CSS3基础与加强上
44前端开发基础视频-CSS定义与HTML结构之间的关系
第一节：CSS基础入门
1:CSS定义与编写CSS
2:CSS语法与选择器
3:CSS选择器优先级
4:CSS层叠和继承特性
CSS的定义
什么是CSS？
－CSS指层叠样式表（Cascading Style Sheets）
外观显示样式。
－CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
－CSS就是控制页面布局的样式。
HTML和CSS的关系：
结构。
美化页面。
交互的角度提升用户体验。
45前端开发基础视频-行内样式和浏览器默认样式
如何编写CSS样式？
－缺省样式（浏览器样式）
可以通过设置修改浏览器的样式。
所有的标签都有默认的样式：h1，h2，div等
－内联样式 style属性
<span style=“color:red”></span>
－内嵌（嵌入，内部）样式，head标签中添加style标签。
在head标签中添加style标签。
<head>
<style>p{color:red}</style>
</head>
－外部样式，外联样式（link）
通过link标签引入css样式文件
<link rel=“stylesheet” href=“a.css”/>
47前端开发基础视频-import导入CSS样式详解
48前端开发基础视频-CSS语法及简单CSS属性
CSS语法
选择器、属性、声明、括号、换行不敏感、空格不敏感
案例：
div { color:red;}
p { font-size:14px; color:blue; }
h1 { width:20px; height:200px; }
选择器(选择符)、width:20px;为声明、width为属性、20px为值。
49前端开发基础视频-CSS语法案例
案例：CSS设置样式
设置p标签的背景色为红色
p{ background-color: red;}
设置H1标签的字体颜色为绿色
h1{ color: green;}
设置span标签的文本为14像素
span { font-size: 14px;}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS示例</title>
<link rel="icon" href="dragon.png">
<meta charset="utf-8">
<!--type="text/css"可以省略，其为默认值--><!--注意CSS中(<style>和</style>之间)只等使用/**/进行注释-->
<style type="text/css">
p
{
color: aqua;
font-size: 50px;
background-color: royalblue;
}
</style>
<style>
.internalStyle/*这个.不能忘记*/
{
color: firebrick;
text-align: right;
</style>
<link rel="stylesheet" href="main.css">
<style>
@import url(main.css);/*类似于C中的头文件引用，直接讲main.css的内容直接放到此处，导入样式必须写在所有的其他样式设置之前*/
</style>
</head>
<body>
<h1 style="color:red; font-size:36px">h1标签默认样式</h1><!--所有标签都有style属性,行内样式,通过在标签中设置style属性来控制样式效果-->
<p>这是一个段落标签</p>
<ul class="internalStyle"><!--unorder list-->
<li>li<a href="dragon.png" target="_blank">a标签</a>li</li>
</ul>
<h2> abcdef</h2>
</body>
</html>
main.css
/*CSS样式文件中也能使用导入样式*/
/*@import url(b.css);*/
.ExternalStyle1
{
width:400px;
height:30px;
background:blue;
}/*外部样式*/
a
{
color: blueviolet;
font-style: italic;
font-size: 30px;
text-align: left;
}
50前端开发基础视频-CSS注释
CSS的注释
CSS的注释格式：/*注释内容*/
可以同时注释多行语句比如：
/*单行注释*/
/*多行注释
多行注释
多行注释*/
/*
* 文件声明注释
* 作者：＊＊＊
* 目的：＊＊＊
*/
51前端开发基础视频-标签选择器和通配符选择器
CSS选择器综述
所有标签选择器*{}
标签选择器 p{} div{}
ID选择器 #head{}
类选择器 .head{}
层级选择器
属性选择器
子元素选择器
相邻兄弟选择器
伪类选择器
伪元素选择器
通配符选择器
它是所有选择器中作用范围最大的，能匹配页面中所有的元素。其基本语法格式如下：
*{
属性1:属性值1;
属性2:属性值3;
……
}
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
*{
margin:0;
padding:0;
}
一般不用。
52前端开发基础视频-ID选择器
ID选择器
HTML标签都有ID属性，而且整个页面唯一。
id一般用于CSS的选择器和JS的钩子。
id选择器使用“＃”进行标识，后面紧跟id名。
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
HTML标签中用的的ID属性值必须是唯一的，不能在一个标签中使用两个id。
53前端开发基础视频-HTML标签的ID命名规范
ID选择器命名规范
1：允许出现字母（26个字母，大小写均可、严格区分）、下划线、数字。
2：只允许以字母开头
3：命名长度没有限制，可以是1个字母，也可以是多个。不建议太长
4：不允许出现标签名（只是建议）
注意ID优先级非常高，所以确定在整个页面内唯一出现时，才可以使用ID选择器，不然因为优先级问题，在后续维护中不能很好进行修改更新。
54前端开发基础视频-类选择器
类选择器
类选择器，是对HTML标签中class属性进行选择。CSS类选择器的选择符是“.”
－例如:.demo{ color:red; }
。
55前端开发基础视频-多个类属性、id和class选择器的区别
ID选择器和class选择器的区别、一个标签的class属性可以有多个值
56前端开发基础视频-类选择器id选择器综合案例
57前端开发基础视频-复合选择器之标签指定式选择器
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS示例</title>
<link rel="icon" href="dragon.png">
<meta charset="utf-8">
<style>
/*标签选择器，影响所有的标签*/
div
{
background-color: red;
width: 100px;
height: 100px;
}
/*通配符选择器，代表页面中所有的标签*/
*
{
border-width: 10px;
border-left-color: rebeccapurple;
border-bottom-color: red;
font-size: 30px;
text-decoration:line-through;
}
/*ID选择器*/
#p1
{
font-size: 100px;
color: orange;
}
.internalStyle1
{
color: purple;
}
.internalStyle2
{
color: coral;
font-size: 35px;
}
.internalStyle3
{
font-size: 45px;
}
</style>
</head>
<body>
<div style="background-color:blue"><!--注意看行内样式覆盖了内部样式-->
div
</div>
<ul>
<li><a href="#">衣服</a></li>
<li><a href="#">鞋子</a></li>
<li><a href="#">帽子</a></li>
</ul>
<p id="p1">ID选择器</p>
<ol>
<li class="internalStyle1">
企鹅
</li>
<li class="internalStyle2">
鸵鸟
</li>
<li class="internalStyle1 internalStyle3"><!--多个类之间用空格区分开来-->
蜂鸟
</li>
<li id="p1">
小飞象
</li>
</ol>
</body>
</html>
57前端开发基础视频-复合选择器之标签指定式选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器</title>
<meta charset="utf-8">
<style>
h3.title-msg/*复合选择器h3中class＝title-msg的才有效果*/
{
color: red
}
</style>
</head>
<body>
<h3 class="title-msg">复合选择器测试1</h3>
<h3>复合选择器测试2</h3>
<p class="title-msg">p标签</p>
</body>
</html>
58前端开发基础视频-复合选择器之后代选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器</title>
<meta charset="utf-8">
<style>
.divStyle1
{
color: blue;
}
.box li/*后代选择器*/
{
color: green;
}
div p
{
background: red;
}
</style>
</head>
<body>
<div class="divStyle1"><!--下面的li将继承此div中设置的divStyle1样式-->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>
<div class="box"><!--作用于div下面所有的li标签-->
<ul>
<li>武汉</li>
<li>郑州</li>
<li>深圳</li>
</ul>
<p>p标签</p>
</div>
</body>
</html>
59前端开发基础视频-复合选择器之并集选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<title>复合选择器</title>
<meta charset="utf-8">
<style>
h1, h2, p ,li
{
color: red;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h2>h2标签</h2>
<p>p标签</p>
<ul>
<li>人民币贬值</li>
</ul>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
