CSS进阶

CSS进阶

1.css定义：

是一种标记语言，主要用于设置HTML页面中的文本内容，（字体大小，对齐方式.......),图片的外形（宽度，边框，样式，边距.........)以及版面的布局和外观显示样式。

2.css优先级

• 多重样式可以层叠,可以覆盖.

• 样式的优先级按照"就近原则”

• 行内样式>内嵌样式>链接样式>浏览器默认样式

3.css应用方式

（1）行内样式表

（2）内嵌样式表

• （3）外部样式表：

• 外部样式表页面结构HTML代码与样式CSS代码的完全分离

• 维护方便

• 如果需要改变网站风格，只需要修改公共CSS文件

• 可以在同一个 HTML 文档内部引用多个外部样式表

4.css代码风格

(1)样式格式书写

①紧凑格式
h1 {acolor: deppink ;font-size:50px;}

②展开格式:

 h2{
color:pink;
font-size:10px;
​
}

（2）空格规范

h3  {                       选择器和大括号之间保留一个空格 
​
color:  pink;             属性值前面，冒号后面保留一个空格
​
}

5.css选择器

（1）选择器的作用：

选择器就是根据不同需求，把不同的标签选出来，简单来说，就是用来选择标签的。

（2）选择器的分类：

①基础选择器：类选择器；i d选择器；标签选择器；通配符选择器。

②复合选择器

6.css字体设置

（1）字体系列：

（2）字体大小：

（3）字体粗细

（4）字体样式

如：

（5）字体复合属性写法

以上代码可以简写成

如

注意：

• 使用font属性时，必须按上面语法格式中的顺序写，不能更换顺序，并且各个属性间以空格隔；

• 不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用

（6）字体属性总结

（7）chrome调试工具

• 打开调试工具方式：点击F12键；

• 调试工具使用方法：

（8）快速生成CSS样式语法

（9）复合选择器

9.1复合选择器的分类

9.1.1后代选择器

9.1.2子元素选择器

练习题：

做法：

做法：

9.1.3并集选择器

如

如

9.1.4伪类选择器

（10）元素显示模式

10.1定义：就是元素标签以什么方式进行显示.

10.2作用：网页的标签非常多，在不同的地方用到不同的标签，了解他们的特点可以更好的布局我们的网页。

10.3分类 ：

• 块元素

  

• 行内元素

  

• 行内块元素

  

10.4总结

10.5元素显示模式转换

（11）背景

11.1背景颜色

11.2背景图片

11.3背景平铺

11.4背景位置

11.5背景固定

（12）导航栏