Web前端第七章——CSS基础
目录
编辑
1.CSS的优势
①表现和内容分离
②增强网页的表现力
③使整个网站显示风格趋于统一
2.CSS基本语法
①基本语法：选择器{属性：属性值}
②CSS
③脚本
④复合属性
⑤多个属性
⑥CSS注释
3.CSS选择器声明
①集体声明
②全局声明
③派生选择器
4.选择器类型
①类选择器
②id选择器
③标记选择器（元素选择器）
④伪类选择器
5.CSS优势
①表现和内容分离
②增强了网页的表现力
③使网站整个显示风格趋于统一
6.CSS选择器定义与引用
①内敛样式表
②内部样式表
③外部样式表
7.CSS继承与层叠
1.CSS的优势
①表现和内容分离
CSS通过网页定义HTML标记设置如何显示网页格式，使得页面内容和表现分离，简化了网页格式设计，使对网页格式修改更方便。
②增强网页的表现力
CSS样式属性提供了比HTML更多的格式设计功能。
③使整个网站显示风格趋于统一
将CSS样式定义到样式表中，然后在多个网页中同时使用应用样式表文件中的样式，确保网站多个并且具有统一格式，并且可以随时更新样式，大大降低了网站的开发和维护成本。
2.CSS基本语法
①基本语法：选择器{属性：属性值}
selector{
property1:vulue1;
property2:value2;
...
}
/*举个例子*/
div{
height:100px;/*盒子高度*/
width:200px;/*盒子宽度*/
color:blue;/*字体颜色*/
background-color:pink;/*背景颜色*/
}可以把上面那个语法理解为：选择器{属性：属性值}
- 选择器： 选择器是需要改变样式的HTML元素。
- 声明：声明是由一个或者多个属性与属性值对组成。例如：color、font-style、border...
- 属性值&属性：属性是用于指定选择器某一方面的特性；属性值是用于指定选择器的特性的具体特性。“属性：属性值”必须一一对应，并且用":"连接，每个属性值对用";"隔开
②CSS
属性名为两个及以上单词组合时用“-”隔开，比如背景颜色是：background-color。
③脚本
脚本的背景颜色对象属性则连写为：backgroundColor，如果属性由两个及以上单词组成，则从第二个单词开始所有单词首字母大写
p{
background-color:red;/*背景颜色*/
font-size:20px;/*文字大小*/
color:blue;/*文字颜色*/
}④复合属性
在CSS中有些属性可以表示多个属性的值。
- 1.用font复合属性的时候要注意顺序，否则可能出现实现不了的情况。
- 2.复合属性中，每个属性之前用空格隔开。
- 3.除了font之外还有border、margin等也是复合属性。
p{
font-style:italic;
font-size:20px;
font-family:黑体;
}
/*可以改写为如下*/
p{
font:italic 20px 黑体;
}
⑤多个属性
有些属性可以一次设置多个值。
p{
font-family："楷体"，"黑体"，"Time New Roman"；
}这个属性是字体的意思，如果在运行的时候发现你没有下载楷体就会看黑体有没有，没有的话就到最后一个，这个会按照字体出现顺序进行优先选择。
⑥CSS注释
注释内容不能嵌套使用：/*注释内容*/
p{
/*注释文字，这样就是什么属性都没有设置*/
}3.CSS选择器声明
①集体声明
h1,h2,h3,p{
color:purple;
font-size:30px;
}②全局声明
*{
color:pink;
font-size:20px;
}*表示全局，所有标记。
③派生选择器
li strong{
font-style:inalic;
font-weight:normal;
color:green;
}4.选择器类型
①类选择器
任何合法的HTML标记都可以使用class属性
文字部分
②id选择器
每个id属性取值必须唯一，且只能指定一个标记，必须以字母开头。
id修饰内容
③标记选择器（元素选择器）
直接使用HTML标记名称作为选择器。
标记：伪类名{/*CSS规则*/}
④伪类选择器
这个可以用于超链接、具体标记内容中第一行、第一个字等。
常用伪类：
link：设置a标签在未访问前；
hover：设置a标签在鼠标悬停的时候；
visited：a标记访问后；
first-letter：用于块，设置第一个字符样式；
first-line：用于块，设置第一行样式；
5.CSS优势
①表现和内容分离
使页面内容和表现内容分离，简化网页格式设计，对网页格式修改方便
②增强了网页的表现力
CSS属性提供了比HTML更多的格式设计功能
③使网站整个显示风格趋于统一
将CSS样式定义到样式表文件中，然后可以在多个网页同时应用该样式表文件
6.CSS选择器定义与引用
①内敛样式表
语法：
<标记 style="属性1:属性值1;属性2:属性值2;">
修饰部分
标记是指HTML标记，例如p、h1、body等；
标记的style定义的声明只对自身有效；
标记自身定义的style样式优先其他所有样式定义。
②内部样式表
语法：
写在HTML里面，只对网页有效，使用放置CSS规则
③外部样式表
链接外部样式表语法：
说明：link是单标记，也是空标记，只包含属性。
type：规定被链接的文档的mimf类型
rel：定义当前文档与被链接文档之间的关系
href：（URL）定义被链接文档地址
7.CSS继承与层叠
CSS继承是指子标记会继承父标记的所有样式风格，并且可以在父标记样式风格的基础上加以修改产生新的样式，而子标记的风格完全不影响父标记。
CSS层叠样式优先级：行内样式>id样式>class样式>标记样式