目录
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属性
<div class="style">文字部分</div>
<style>
.style{
color:green;
}
</style>
②id选择器
每个id属性取值必须唯一,且只能指定一个标记,必须以字母开头。
<style>
#p1{
color:red;
font-size:20px;
}
</style>
<p id="p1">id修饰内容</p>
③标记选择器(元素选择器)
直接使用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样式优先其他所有样式定义。
②内部样式表
语法:
<style>
选择器1{属性1:属性值;属性2:属性值2}
选择器2{属性1:属性值;属性2:属性值2}
</style>
写在HTML里面,只对网页有效,使用<style></style>放置CSS规则
③外部样式表
链接外部样式表语法:<link type="text/css" rel="stylesheet" href="out.css">
说明:link是单标记,也是空标记,只包含属性。
type:规定被链接的文档的mimf类型
rel:定义当前文档与被链接文档之间的关系
href:(URL)定义被链接文档地址
7.CSS继承与层叠
CSS继承是指子标记会继承父标记的所有样式风格,并且可以在父标记样式风格的基础上加以修改产生新的样式,而子标记的风格完全不影响父标记。
CSS层叠样式优先级:行内样式>id样式>class样式>标记样式