第一个css程序

css程序都是在style标签中书写

打开该网页，可以看到h1标签中的我是标题被渲染成了红色

可以在同级目录下创建一个css目录，专门存放css文件，可以和html分开编写

然后在html页面中，利用link标签以及css文件地址，将该css文件引入html中，达到上述同样效果

也可用下述import方式引入外部的css文件

css的优势:
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件

css三种导入方式

1.内部样式：在页面中用style标签中写css样式

2.行内样式：在标签元素中直接用style属性编写样式

3.外部样式：在外部css目录中编写css文件，再用上述link标签引入css样式

如果这多个css样式对同一个内容进行渲染，则采取就近原则进行生效，谁离渲染内容近，用谁渲染

css选择器

基本选择器

1、标签选择器

标签选择器，会选择到页面上所有的这个标签的元素

2、类选择器 class

类选择器的格式.class的名称{}

好处，可以多个标签归类，是同一个class，可以复用

3、ld 选择器

id选择器 #id名称{} id必须保证全局唯一

优先级:不遵循就近原则，固定的id选择器>class 选择器 > 标签选择器

层次选择器

1、后代选择器（在某个元素的后面祖爷爷 爷爷 爸爸 你）

在body标签下的所有p标签，不分层次级别

2、子选择器（一代 儿子）

在body标签下面的第一代p标签，因为无序列表里的p标签为第二级的标签，故不在范围内，不渲染

3、相邻兄弟选择器（相邻向下的一个）

active类标签的向下一个，的同级p标签渲染

4、通用选择器

通用兄弟选则器，当前选中元素的向下的所有兄弟元素

选中active类下的所有同级p标签元素

结构伪类选择器

ul的第一个子元素,ul的最后一子元素

选择当前p元素的父级元素，选中父级元素的第2个，并且是当前元素才生效!

属性选择器(常用)

先通过后代选择器，将demo类标签下的所有a标签元素渲染

a标签中存在id属性的元素a[id]{}

a标签中，id=first的元素被渲染成黄色

a标签中class属性包含links的元素被渲染， class*=“links”

a标签中href属性以http开头的元素被渲染 a[href^=http]{}

a标签中href属性以pdf结尾的元素被渲染a[href$=pdf]{}

 美化网页元素

为什么要美化网页

1、有效的传递页面信息，凸显页面的主体
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验

span标签

span标签:重点要突出的字，使用 span 套起来

字体样式

font-family:字体

font-size:字体大小

font-weight:字体粗细

color:字体颜色

文本样式

颜色 color rgb rgba

text-align :排版，居中

text-indent:2em;段落首行缩进

行高，和 块的高度一致，就可以上下居中

装饰 text-decoration

text-decoration:none;可以让a标签的文本内容中的下划线消失

鼠标悬浮的颜色，鼠标悬浮在a标签的文本内容上时，显示为橙色

a: hover

、

鼠标按住未释放的状态，a:active,鼠标选中不放手，a标签文本内容显示为绿色