定义:
- 层叠样式表 (Cascading Style Sheets)
- 主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
-
好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等,设置文本和背景属性的能力,为任何元素创建边框及距离
语言特点:
- 易于修改、使用,将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
- 多页面应用 多个页面中使用同一个CSS样式表。
- 层叠 对一个元素多次设置同一个样式,这将使用最后一次设置的属性值
- 页面压缩 将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间
CSS代码语法:
css样式由选择符和声明组成,声明由属性和值组成,如图所示
选择符:又称选择器,指明网页中要应用样式规则的元素
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔。
注释:CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->) ,即:ctrl+?
CSS中的基本样式:
3种:内联式、嵌入式、外联式
- 内联式:css代码直接写在现有的HTML标签中
<p style="color:red;font-size:12px">这是一个内联式。</p>
- 嵌入式:可以把css样式代码写在<style type="text/css"></style>标签之间,并且一般情况下嵌入式css样式写在<head></head>之间。
<style type="text/css"> span{ color:red;}</style>
- 外联式:css代码写在一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内,使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="text.css" rel="stylesheet" type="text/css" />
- 优先级: 内联式>嵌入式>外联式
认识CSS中的选择器:
标签选择器/元素选择器
-
标签选择器就是html代码中的标签,比如<html><body><h1><p><img><ul>等
p{ font-size: 20px; }
id 选择器
- 为标签设置id="ID名称",而不是class="类名称"。
-
ID选择符的前面是井号(#)号,<div id ="box1"></div>
-
ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
#box1{ 50px; height: 50px; background-color:red; }
类选择器
- 使用合适的标签把要修饰的内容标记起来<p>你好<p>
-
用class="类选择器名称"为标签设置一个类 <div class="box1"><p>你好</p></div>
-
设置css样式 .box1{color:blue;}
.box1{ 160px; height: 80px; background-color:rosybrown; }
属性选择器:对带有指定属性的 HTML 元素设置样式。
input[type="text"] { 150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
后代选择器:后代选择器是作用于所有子后代元素
<p>这是一个<span>文档</p>
span{
color: darkblue;
}
分组选择器:
/*同类兄弟第 第n个被选中*/ li:nth-child(7){ background-color: pink; } /*同类兄弟倒数第n个选中*/ li:nth-last-child(7){ background-color: blueviolet; } /*同类兄弟倒数第1个选中*/ li:first-child{ background-color: aquamarine; } /*同类兄弟倒数最后1个选中*/ li:last-child{ background-color: brown; } /*奇数项选中*/ li:nth-child(odd){ background-color: darkblue; } /*偶数项*/ li:nth-child(even){ background-color: coral; } /*_每。。。。一个循环,(_n从0开始,数字3可以随便更改—)—*/ li:nth-child(3n){ background-color: darkred; }
子集选择器:子选择器是通过“>”进行选择。>作用于元素的第一代后代
<ul> <li>1111</li> <li>2222</li> <li>33333</li> <li>44444</li> <ol> <li>77777</li> <li>88888</li> <li>99999</li> </ol> <li>000000</li> </ul>
CSS外联如下:
ul>li{
border: solid red;
}
ol>li:nth-child(2){ border:solid red; }
并集选择器:同时选中所有标签,一并给予属性值
h1,h2,h3,h4,h5,h6{ font-weight: normal; }
伪类选择器:允许给html不存在的标签(标签的某种状态)设置样式
/*a初始颜色/未被访问*/ a:link{ color: red; } /*访问以后*/ a:visited{ color:gold; } /*当鼠标悬停/移入*/ a:hover{ color: blue; } /*点击时*/ a:active{ font-size: 33px; }
伪元素:
<a href="#">点击</a>
CSS外联如下:a标签
/*________________伪元素____________*/ .pl:first-line{ color: pink; } .pl:first-letter{ font-size: 22px; } a:before{ content: "请点击"; //a标签前面添加文字 } a:after{ content: "嘿嘿"; //a标签后面添加文字
color:red; }