1.CSS:
1.1 W3C的介绍:
万维网联盟
W3C,这个建立于 1994 年的组织,其宗旨是通过促进通用协议的发展并确保其通用型,以激发 web 世界的全部潜能。
1.2 CSS的介绍:
层叠样式表
样式表可描述文档如何被显示、发音或打印。CSS 是一种向网页添加样式的机制。
2.层叠样式表:
2.1引入方式:
行内样式
内嵌样式
外链样式
导入样式
2.1.1 行内样式
概念:直接在标签内部通过使用style属性添加CSS样式
<h2 style="color:red">这是行内样式</h2>
基本语法:<标签名 style="属性1:属性值1;属性2:属性值2; 属性3:属性值3; "</标签名>
2.1.2 内嵌样式
概念:是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<style type="text/css">
</style>
基本语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表</title>
<style type="text/css">
h1
{
color:blue
}
</style>
</head>
<body>
<h1>内嵌样式</h1>
</body>
</html>
2.1.3 外链样式
概念: 是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
注意:link标签是在head里不是在style里
基本语法:
(注:link是单标签)
2.1.4 导入样式(一般不用)
在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。
基本语法:
@import在html中使用,如下:
<style type="text/css">
@import url(style.css);
</style>
@import在CSS中使用,如下:
@import url(style.css);
总结:
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离,HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离,页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面, 每个文件都会变大,后期维护难度也大, | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离,实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便 | 需要引入 | 最多 | 控制整个站点(多) |
四种样式表优先级:
当四种样式表有多个同时时候,理论上:行内>内嵌>链接>导入 实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高。
3.CSS选择器
css选择器的作用:如果想要用css为html页面中的元素添加样式,就需要用到css选择器,css设置样式都是通过css选择器进行控制。 css选择器就是用于指向需要css作用的标签,让css样式知道自己需要到那个标签上去。
css语法结构
选择器{
属性:属性的值;
属性:属性的值;
属性:属性的值;
}
3.1 基本选择器
基本语法:HTML元素{属性1:属性值1;属性2:属性值2;...}
1.标签选择器(针对一类标签)
div{
color: blue
}
2.id选择器 (针对某一个特定的标签使用)
ID名称站在HTML页面中必须唯一。
基本语法:#id选择器名{属性1:属性值1;属性2:属性值2;...}
#first{
background: yellow
}
3.类选择器 (针对你想要的所有标签使用)
基本语法:.类选择器名{属性1:属性值1;属性2:属性值2;...}
说明:类选择器名称的第1个字符不能使用数字;类选择器的优先级高于元素选择器,所以相同属性的样式,类选择器的样式会覆盖元素选择器的样式,
类名在HTML页面中可以重名
.name
{
color: green
}
4.通用选择器 (针对所有的标签都适用(不建议使用)
基本语法:*{属性1:属性值1;属性2:属性值2;...}
*{
color: red
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四种选择器</title>
<style type="text/css">
/*标签选择器*/
div{
color: red
}
/*id选择器*/
#zx1{
color: blue
}
/*类选择器*/
.name{
color: green
}
/*通用选择器*/
{
color: yellow
}
</style>
</head>
<body>
<div id="zx1" class="name">一个标签</div>
<p id="zx2">二个标签</p>
<h1 class="name">三个标签</h1>
<h1 id="zx1">四个标签</h1>
</body>
</html>
3.2四种基本选择器的优先级:id>类>标签>通配符
3.3包含选择器
1.子代选择器(获取某个标签的第一级子标签)
div.user>ul{
border-style: solid;
border-color: green;
}
2.后代选择器(获取某个标签里的所有子标签)
.user li {
border-style: solid;
border-color: red;
}
3.分组选择器(逗号选择器,)
.name,#first,p,h1{
color: red
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style type="text/css">
div.c>ul{
border-style: solid;
border-color: green;
}
.c li
{
border-style: solid;
border-color: red;
}
#zx1,.b,h1
{
color:yellow;
}
</style>
</head>
<body>
<div id="zx1" class="a">第一个标签</div>
<h1 id="zx2">第二个标签</h1>
<p class="b">第三个标签</p>
<div class="a">第四个表签</div>
<hr>
<div class="c">
<ul>
<li>张旭</li>
<li>张旭</li>
<li>张旭</li>
<li>张旭</li>
</ul>
<li>张旭</li>
<li>张旭</li>
<li>张旭</li>
<li>张旭</li>
<li>张旭</li>
</div>
</body>
</html>
3.4属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*某个标签里的某个属性值*/
.container[class]{
color: red
}
div[title]
{
color: red
}
/*准确到某一个值*/
input[type*="e"]
{
color: red
}
/*以什么为开始*/
input[type^="e"]
{
color: blue
}
/*以什么为结尾*/
input[type$="e"]
{
color: green
}
/*表示下一个标签*/
.zx1+p
{
color: yellow
}
/*属性名称可以等于某一个值*/
[title="这是一个标题"]
{
color: green
}
</style>
</head>
<body>
<div class="container">这是一个div</div>
<div title="这是一个标题">第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="zx1">第三个div</div>
<p id="zx2">这是一个段落</p>
</body>
</html>
3.5 伪选择器
伪选择器是一种特殊的选择器,它分为伪类选择器和伪对象选择器2种。
3.5.1 伪类选择器
:link | 链接点击之前 |
:visited | 链接点击之后 |
:hover | 悬停 |
:active | 激活 |
:focus | 某个标签获得焦点 |
注意:a:hover
必须在 CSS 定义中的 a:link
和 a:visited
之后,才能生效!a:active
必须在 CSS 定义中的 a:hover
之后才能生效!伪类名称对大小写不敏感。
这四种状态顺序不可以改变
link--visited--hover---active
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
---|---|---|
:active | a:active | 选择活动的链接。 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 |
:disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
:empty | p:empty | 选择没有子元素的每个 <p> 元素。 |
:enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
:first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
:first-of-type | p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 |
:focus | input:focus | 选择获得焦点的 <input> 元素。 |
:hover | a:hover | 选择鼠标悬停其上的链接。 |
:in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
:invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
:lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
:last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
:last-of-type | p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 |
:link | a:link | 选择所有未被访问的链接。 |
:not(selector) | :not(p) | 选择每个非 <p> 元素的元素。 |
:nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
:only-of-type | p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 |
:only-child | p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 |
:optional | input:optional | 选择不带 "required" 属性的 <input> 元素。 |
:out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
:read-only | input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 |
:read-write | input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 |
:required | input:required | 选择指定了 "required" 属性的 <input> 元素。 |
:root | root | 选择元素的根元素。 |
:target | #news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 |
:valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
:visited | a:visited | 选择所有已访问的链接。 |
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 <p> 元素之后插入内容。 |
::before | p::before | 在每个 <p> 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style type="text/css">
a:link
{
color: red
}
a:visited
{
color: green
}
a:hover{
color:yellow
}
a:active
{
color: blue
}
</style>
</head>
<body>
<a href="#">点我</a>
</body>
</html>
3.6 css伪元素选择器
::first-line
“first-line”伪元素用于向文本的首行设置特殊样式。
::first-letter
“first-letter”伪元素用于向文本的首字母设置特殊样式,不过这个主要运用于段落排版上多,比如说首字下沉。
::before
“:before” 伪元素可以在元素的内容前面插入新内容,一般配合“content”使用。
::after
:after”伪元素可以在元素的内容之后插入新内容
::selection
改变浏览网页选中文的默认效果
4.CSS中常见样式
4.1控制字体
设置字号-------font-size:12px
设置字色-------color:red
设置字体-------font-family:' 宋体' (中文要加引号)
设置行高-------line-height: 150% 1.5em
设置字体粗细-- font-weight:normal(正常) bold(粗体
单位:em,px
p
{
font-size:20px;
color:red;
font-family:'宋体';
line-height: 150%;
font-weight: bold;
}
4.2样式特点
1.继承
网页中的子元素会继承父元素样式
2.层叠性
如果子元素定义了和父元素相同的样式,子元素的样式会覆盖掉父元素的样式
后面定义的样式会覆盖掉前面的样式
4.3控制文本
设置对象中文文本缩进------text-indent:2em(取负数)
文本水平对齐的方式------text-align:left right center
对象空白处的处理-----white-space:normal(自动换行)pre(换行或者是空白受保护)nowrap(强制在同一行显示)
文本大小写的控制------text-transform:none(正常大小) capitalize(文本中的每个单词以大写字母开头)
uppercase(定义仅有大写字母) lowercase(定义无大写字母,仅有小写字母)inherit(规定应该从父元素继承 text-transform 属性的值。)
p
{
text-indent: 2em;
text-align: center;
white-space: nowrap;
text-transform: capitalize;
}
4.4border边框
border:1px solid red ----1像素 红实线 红边框
border-image 图片边框
border-width 规定边框的宽度
border-style 规定边框的样式
border-color 规定边框的颜色
border-top(left right center-with(color style)
border-radius 向元素添加圆角边框
inherit 规定应该从父元素继承 border 属性的设置。
4.5外边距(允许负值)
CSS margin 属性用于在任何定义的边框之外,为元素周围创建空间。
通过 CSS,您可以完全控制外边距。有一些属性可用于设置元素每侧(上、右、下和左)的外边距。
CSS 拥有用于为元素的每一侧指定外边距的属性:
- margin-top
- margin-right
- margin-bottom
- margin-lft
所有外边距属性都可以设置以下值:
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
4.2.6内边距
CSS 拥有用于为元素的每一侧指定内边距的属性:
- padding-top
- padding-right
- padding-bottom
- padding-left
所有内边距属性都可以设置以下值:
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
padding:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}