目录
7,行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙
CSS
1,CSS介绍
- CSS:Cascading Style Sheet:层叠样式表
- 作用:修饰和美化页面元素,实现网页排版布局
2,CSS使用
在HTML文档中使用CSS 主要有三种方式
- 行内样式/内联样式
特点:在具体的标签中使用style属性,引入CSS样式代码- 语法:<标签 style='CSS 样式声明'>
- CSS 样式声明 / 语句
- 对当前元素添加样式
- 语法
CSS 属性:值;
- 注意:CSS 样式声明可以是多条
<标签 style='属性:值;属性:值;'>
- CSS 样式声明 / 语句
- 常见CSS属性
- 设置字体大小
- 属性 font-size
- 取值 以像素为单位的数值,浏览器默认的字体大小是16px
et:
<div style='font-size:20px;'> CSS 介绍</div>
- 设置字体颜色
- 属性 color
- 取值 颜色的英文单词
et:
<div style='color:red;'>使用</div>
- 设置背景颜色
- background-color
- 取值颜色的英文单词
- 设置字体大小
- 语法:<标签 style='CSS 样式声明'>
- 文档内嵌 / 内部样式表
特点:将CSS代码与具体的标签相分离,在HTML 文档中使用<style></style>标签引入CSS代码
语法:<style> 选择器1 选择器2 选择器3 ... </style>
选择器:- 使用文档内嵌方式引入CSS样式表时,实现了结构与样式相分离,但是需要自己定义选择器来匹配文档中元素,为其应用样式
作用:匹配文档元素为其应用样式 - 语法:
选择器实际上由两部分组成
选择器(符){
属性 : 值;
属性 : 值;
}
et:
标签选择器 / 元素选择器:
使用标签名作为选择符,匹配文档中所有的该标签,并应用样式p { color :green; font-size :20px; }
注意:<style></style> 可以书写在文档中的任意位置,但是基本样式优选的选择,一般写在<head></head>中<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 3. 引入外部的样式表文件 --> <link rel="stylesheet" type="text/css" href="index.css"> <style type="text/css"> /*2. 文档内嵌方式*/ /*标签选择器*/ p { color: green; } </style> </head> <body> <!-- 1. 行内样式 --> <p style="color:red;">普通文本p</p> <p>普通文本p</p> <h1>一级标题 默认32px</h1> <div style="font-size:32px; color:red; background-color: pink;"> 添加样式的文本 <p>div中的普通文本p</p> </div> <p>普通文本p</p> </body> </html>
- 使用文档内嵌方式引入CSS样式表时,实现了结构与样式相分离,但是需要自己定义选择器来匹配文档中元素,为其应用样式
- 外链方式 / 外部样式表
- 定义外部的.css文件. 在HTML中引入即可,真正实现文档与样式表的分离
- 语法:
在外部的样式表中使用选择器定义样式:
在HTML文档中使用<link>引入CSS文件
et:<link rel="stylesheet" href="url">/*书写选择器*/ /*接上一提,地址index.css*/ h1{ background-color: yellow; color: blue; } p{ color:orange; }
3,样式表特征
- 继承性
大部分的CSS属性都是可以被继承的
子元素或者后代元素可以继承父元素中的样式
et:
所有的文本属性都可以被继承
块元素的宽度与父元素保持一致 - 层叠性
允许为元素定义多个样式,共同起作用
et:p{ color:red; background-color:blue; }
- 样式表的优先级
从低到高:- 浏览器缺省设置:浏览器默认样式
- 文档内嵌 / 外链方式:在不发生样式冲突时,样式共同起作用:
如果发生样式冲突,后来者居上,最后定义的样式最终显示 - 行内样式的优先级最高
4,CSS 选择器
- 作用:规范页面中哪些元素能够应用声明好的样式
目的:匹配页面元素 - 详解
- 标签选择器 / 元素选择器
特点:将标签名作为选择符,来匹配文档中所有的该标签,包含了后代元素
语法:
练习:标签名{ 属性:值; }
新建文件 tag-selector.html
创建超链接标签
设置超链接文本色为红色
取消下划线 text-decoration:none;<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> a{ color: red; text-decoration: none; } </style> </head> <body> <a href="#">百度</a> </body> </html>
- 类选择器
特点:通过元素的class属性值进行匹配
语法:
以英文 . 开头,跟上class属性值,中间没有空格.c1{ 样式 } <p class='c1'><p 文本</p>
练习:- 创建文件class-sedsadot
创建几个元素div p span h1
使用类选择器为上述元素添加样式- 文本大小为24px
- 背景颜色为橘色
- 文本斜体显示font-style:itelic;
示例:
- 类选择器的结合使用
- 标签名,类名
中间没有空格
表示在指定的标签中匹配class属性值相对应的元素
注意:标签名一定要写在前面,p.c1{ }
et:.clp查找类名为clp的元素 - .类名1.类名2(不常用)
- 标签中使用两个类选择器的样式
<p class="类名1 类名2"><!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .c1{ font-size: 24px; background-color: orange; font-style: italic; } .c2{ text-decoration: underline; } h1.c1{ color:red; } </style> </head> <body> <h1 class="c1 c2">类选择器</h1> <div class="c1">div文本</div> <p class="c1">p文本内容</p> <span class="c1">span文本</span> </body> </html>
- 标签名,类名
- 创建文件class-sedsadot
- ID选择器
- id作用
HTML中所有的元素都有一个id属性,主要用来表示该元素在文档中的标志,具有唯一性 - id选择器
通过元素的id属性值进行匹配
语法:#id属性值{ 样式 }
注意:通常网页中外围的结构化标签,都使用id进行标识,具有唯一性
et:#nav{ } <div id='nav'>导航条</div>
练习:
创建文件xxxxx
创建div,设置id属性值为nav
使用id选择器添加样式
width:100%;
height:50px;
background-color: pink;<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #nav{ width:100%; height:50px; background-color: pink; } </style> </head> <body> <div id="nav">导航条</div> <!-- <h1 id="nav"></h1> --> </body> </html>
- id作用
- 群组选择器
-
作用 :为多个选择器设置共同的样式
-
语法 :
选择器1,选择器2,选择器3
选择器1,选择器2,选择器3,{ 样式 } div,h1,p{ color : gray; } <div></div> <h1></h1> <p></p>
-
-
后代选择器
-
作用
依托于元素的后代关系来匹配元素(既包含直接子元素,也包含后代元素) -
语法
选择器1 选择器2{}
在选择器1对应的元素中匹配后代元素,后代元素需满足选择器2et :
#nav span{}
匹配#nav下的所有span元素
-
-
子代选择器
-
作用 :依托元素的子代关系进行匹配,
只匹配直接子元素 -
语法
选择器1>选择器2 {
}
在选择器1对应的元素中匹配直接子元素,满足选择器2的要求
et :#nav>ul>li{ }
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #nav,#main,#footer{ width: 800px; color: red; /*为元素设置边框 :宽度 颜色 样式*/ border: 1px solid green; } /*#nav li{ color: blue; }*/ #nav>ul>li{ text-decoration: underline; } </style> </head> <body> <!-- 群组选择器 --> <div id="nav"> <ul> <li>首页 <ol> <li>登录</li> <li>注册</li> </ol> </li> <li>男装</li> <li>女装</li> </ul> </div> <div id="main">主要内容</div> <div id="footer">页面尾部</div> </body> </html>
-
-
伪类选择器
-
分类 :
-
超链接伪类选择器
-
动态伪类选择器
-
-
作用 :
主要是针对元素的不同状态去设置样式-
超链接的不同状态
访问前 :link
访问后 :visited
激活(鼠标点按不松):active
鼠标滑过 :hover -
其他元素具备
鼠标滑过 :hover
鼠标点按 :active -
表单控件
获取到焦点时的状态 :focus
对文本框和密码框而言,当用户点击输入时,都视为获取焦点状态
-
-
伪类选择器需要与其他选择器结合使用,设置元素在不同状态下的样式
a:link{ color :black; text-decoration :none; }
-
注意 :
如果要给超链接添加四中状态下的样式,必须按照以下顺序书写伪类选择器
:link
:visited
:hover
:active
简称 “爱恨原则 LoVe / HAte ”
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> /*超链接伪类选择器*/ a:link{ color:black; text-decoration: none; } a:visited{ color:orange; /*text-decoration: underline;*/ } /*动态伪类选择器,表示超链接的其他状态*/ a:hover{ background-color: red; } a:active{ color:blue; } div{ width: 200px; height: 200px; background-color: red; } div:hover{ width: 300px; height: 300px; } input:focus{ /* 取消轮廓线*/ outline: none; } </style> </head> <body> <a href="#">百度</a> <div></div> <input type="text" name="uname"> </body> </html>
综合示例:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #nav{ background-color: pink; } a{ color: black; text-decoration: none; } a:hover{ font-weight: bold; font-size: 20px; } #nav2{ width: 900px; height : 50px; background-color: pink; } #nav2 td{ width: 150px; height: 50px; background-color: orange; /*内容水平居中*/ text-align: center; } </style> </head> <body> <!-- 创建导航栏 --> <div id="nav"> <a href="#">首页</a> <a href="#">男装</a> <a href="#">女装</a> <a href="#">首页</a> <a href="#">男装</a> <a href="#">女装</a> </div> <div id="nav2"> <table> <tr> <td><a href="#">首页</a></td> <td><a href="#">男装</a></td> <td><a href="#">女装</a></td> <td><a href="#">首页</a></td> <td><a href="#">男装</a></td> <td><a href="#">女装</a></td> </tr> </table> </div> </body> </html>
-
- 标签选择器 / 元素选择器
-
选择器的优先级
当多个选择器的样式同时应用到一个元素上时,要按照不同选择器的优先级来应用样式
判断选择器的优先级,主要看选择器的权重(权值)数值越大,优先级越高选择器 权值 标签选择器 1 类选择器/伪类 10 id选择器 100 行内样式 1000 如果是复杂的选择器(后代,子代),选择器最终的权值是各选择器权值之和
简单示例:
<div id="nav"> <ul> <li></li> </ul> </div> #nav li{ --101 color: green; } div li{ --2 color: red; }
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> h1{ color: red; } .c1{ color:green; } #box h1{ color: blue; } #box .c1{ color: orange; } </style> </head> <body> <div id="box"> <h1 class='c1' style="color: yellow;">大标题</h1> </div> </body> </html> <!-- 颜色优先yellow orange blue green red -->
5,尺寸单位与颜色取值
- 尺寸单位
- px - 像素单位,默认单位
- % - 参照父元素对应属性的值进行获取
-------- - in -inch 英寸 1in = 2.54cm
- pt -磅 1pt = 1/72 in
- cm
- mm
- 颜色表示方式
- 英文单词
- rgb(r,g,b)表示颜色
每一种三原色的取值范围 :0 - 255
et :
红色 :rgb(255,0,0);
黑色 :rgb(0,0,0);
白色 :rgb(255,255,255); - rgba(r,g,b,alpha)
设置颜色,还可以调整透明度
三原色的取值范围 0 - 255
alpha 透明度的取值 0 - 1
0 :表示透明
1 :表示不透明
取小数表示半透明,整数部分的0可以省略不写
0.5 / .5 - 十六进制表示颜色
三原色 取值 0 - 255
转换为十六进制
十六进制取值范围 0-9 a-f
表示颜色- 长十六进制 6位表示方法
每两位为一组,代表一种三原色
表示红色
#ff0000
黑色 #000000
白色 #ffffff
其他颜色 :#643a1f - 短十六进制 3位表示方式
浏览器会自动对每一位进行重复补全,最终补全为长十六进制
红色 :#f00 ->#ff0000
黑色 :#000
白色 :#fff<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #box{ width: 80%; background-color: rgb(255,0,0); height: 50px; } h1{ /*#00ff00;*/ background-color: rgba(0,255,0,0.7); width: 50%; } </style> </head> <body> <div id="box"> <h1>一级标题</h1> </div> </body> </html>
- 长十六进制 6位表示方法
6,元素分类
HTML中标签分为
- 块元素
特点 :
1. 独占一行,不与其他元素共行显示
2. 可以手动设置宽高
et : div h1 p ul ol table form - 行内元素
特点 :
1. 可以与其他元素或者文本共行显示
2. 不能手动设置宽高,元素的大小由内容决定
et : span i b label u s sub sup - 行内块元素
特点 :
既可以与其他元素共行显示,也可以手动设置宽高
et : img input
属性 :
可以通过 vertical-align设置行内块元素左右元素与其的垂直对齐方式
取值 : top / middle / bottom
注意 :vertical-align只在行内块元素中使用
7,行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 100px;
background-color: red;
}
span{
width: 500px;
height: 50px;
background-color: pink;
}
img{
width: 200px;
height :200px;
/*设置图片左右元素与图片垂直对齐*/
vertical-align: bottom;
}
.c1{
width: 200px;
height: 100px;
vertical-align: bottom;
}
.c2{
width: 100px;
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<!-- 1. 块级元素 -->
<div>
块元素 :独占一行,可以设置宽高
</div>
<!-- 2. 行内元素 -->
<span>
行内元素 :可以与其他元素共行,不能手动设置宽高,尺寸由内容自适应
</span>
<label>行内元素label</label>
<!-- 3, 行内块元素 -->
<b>加粗</b>
<img src="../day01/img/cat.jpg">
<img src="../day01/img/cat.jpg">
<img src="../day01/img/cat.jpg">
<b>加粗标签</b>
<input type="text" name="uname" class="c1">
<input type="radio" name="" class="c2">
<input type="submit" name="" class="c2">
<label>xxx</label><label>xxx</label>
<label>xxx</label>
</body>
</html>