目录
1.层叠样式表CSS (Cascading Style Sheets).
2.1内部样式表:写在 style 标签中. 嵌入到 html 内部.
1.层叠样式表CSS (Cascading Style Sheets).
对网页中元素位置的排版进行像素级精确控制, 实现美化页面, 做到页面的样式和结构分离.CSS 不区分大小写, 一般统一使用小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/* s设置字体颜色、大小 */
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
注意!!!
- CSS 要写到 style 标签中
- style 标签可以放到页面任意位置. 一般放到 head 标签内.
- CSS 使用 /* */ 作为注释. ( ctrl + /) .
2.引入方式
行内样式优先级>>内部样式,也即是style属性优先级高于style标签
2.1内部样式表:写在 style 标签中. 嵌入到 html 内部.
2.2行内样式表:style属性
行内样式 优先级 >> 内部样式,也即是style属性优先级高于style标签,代码如下
<!-- style标签:内部样式 -->
<style>
p {
/* s设置字体颜色、大小 */
color: rgb(255, 98, 0);
font-size: 15px;
}
</style>
</head>
<body>
<!-- 此处style是属性(行内样式),
优先级高于上面的style标签,因此页面字体颜色是黑色 -->
<p style=color:black> hello world</p>
</body>
2.3外部样式
- 创建一个 css 文件style.css----->(存放样式,不把样式写在源文件)
- 源文件demo.html中------>使用 link 标签引入 css
link标签引入一个外部CSS,herf属性描述了CSS的位置,rel属性:引入文件类型(stylesheet:样式表);CSS文件rel属性默认样式表stylesheet:
demo.htm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>文字部分可发现变化</div>
</body>
</html>
style.css文件:
div {
color:red;
}
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效.
3样式相关
(1)代码展开写:方式二
/* 方式一 */
p { color: red; font-size: 30px;}
/* 方式二 */
p {
color: red;
font-size: 30px;
}
(2)空格规范:
- 冒号后面带空格
- 选择器和 { 之间也有一个空格
4.选择器
4.1基础选择器: 单个选择器构成的
(1)标签选择器:
直接写出标签名,如下代码所示:p标签的内容(猫)都会被设置为红色,而div标签(狗)为绿色
- 快速为同一类型的标签都选择出来.
- 但是不能差异化选择(范围太大,一个标签内所有内容都设置为一种,不能对重点部分进行区分)
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>猫</p>
<div>狗</div>
(2)类选择器:
- 差异化表示不同的标签
- 可以让多个标签的都使用同一个标签.
创建“类”(元素的class属性,不是java中的的类)分类效果,利用其指定需要做差异化的部分
<style>
.blue {
color: blue;
}
</style>
<div>猫咪cat</div>
<div class="blue">猫咪cat</div> 这里添加了class属性,因此这里的内容为blue蓝色
<div>猫咪cat</div>
- 类名用 . 开头的
- 下方的标签使用 class 属性来调用,如 class="blue"
- 一个类可以被多个标签使用, 一个标签也能使用多个类(空格分割)
(3)多个类的使用:
一个类可以被多个标签使用,一个标签可以有多个类
<style>
.box {
width: 20px;
height: 15px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
(4)id 选择器:和类选择器类似.
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带 #
- id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<style>
#fish {
color: red;
}
</style>
<div id="fish">hahahhaahahahah</div>
(5)通配符选择器:*
页面的所有内容都会被改成 红色 (很少使用,一般用于消除浏览器默认样式(清空内外边距))
* {
color: red;
background-color:gray;
}
4.2复合选择器:组合多个基础选择器
(1)后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.(父子之间 使用空格 分割)
<style>
/* 后代选择器*/
ol li {
color: red;
}
.list a {
color:blue;
}
</style>
</head>
<body>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
/* 这部分内容为红色red */
<li >有序列表</li>
<li>有序列表</li>
<li>
<a href="#">有序列表</a>
</li>
</ol>
</body>
</html>
(2)子选择器
- 使用大于号(>)分割
- 只选亲儿子, 不选孙子元素
<style>
.cat ul li a {
color: tomato;
}
</style>
<div class="cat">
<ul>
<li><a href="#">小猫</a></li>
<li><a href="#">小猫</a></li>
<li><a href="#">小猫</a></li>
</ul>
</div>
(3)并集选择器
元素1, 元素2 { 样式声明 }:
一次选中多个标签(标签1和标签2同时设置为一个样式:属性:值)
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
/* 四个标签都是红色*/
div,
h3,
ul>li {
color: red;
}
/* div和h3标签是红色 */
div, h3 {
color: red;
}
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
(4)链接伪类选择器:和<a>标签搭配使用(带冒号:)
a:link 未被访问过的链接
a:visited 已被访问过的链接
a:hover 鼠标指针悬停上的链接
a:active 活动链接(鼠标按下了但是未弹起)
<style>
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
<a href="http://www.baidu.com">百度超链接文本</a>
上述代码表示的意思是:
页面有内容“百度超链接文本”,首次加载页面显示的是link对应的属性black·;当再次点击链接为visited属性绿色(链接地址颜色);鼠标放在文本上则是hover属性;左键按下鼠标但是不放手则是activate属性
(5) :force 伪类选择器
选取获取焦点的 input 表单元素.(此时被选中的表单的字体就会变成红色.)
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<style>
.three>input:focus {
color: red;
}
</style>
5.常见属性
设置字体 .font-family;字体大小 .font-size ;alpha:透明度(不透明1---->透明0)
<style>
<div> {
font-size:15px;
color:rgb(0,255,0,0.3);
}</div>
</style>
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
粗细 font-weight:
- 可以使用数字表示粗细.
- 700 == bold, 400 是不变粗, == normal
- 取值范围是 100 -> 900
<style>
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
</style>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
细细细
</div>
</div>
文字样式:font-style: italic(倾斜);font-style: normal(正常);
文本对齐:text-align:center(center居中对齐;left 左对齐;righ右对齐)
文本装饰:text-decoration:(underline 下划线. )
文本缩进:text-indent (单位px或者em),缩进可以是负数
行高:line-height: [值];(normal,基于浏览器Chrome21px)
背景颜色:background-color: [指定颜色]
背景图片:background-image: url("输入图片路径");
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
背景位置:background-position: x y;
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
<style>
.bgp .one {
background-image: url(rose.jpg);
height: 500px;
background-repeat: no-repeat;
background-color: purple;
background-position: center;
}
</style>
<div class="bgp">
<div class="one">背景居中</div>
</div>
背景尺寸:background-size: length|percentage|cover|contain;
- 可填具体的数值: 如 40px 60px 表示宽高
- 也可以填百分比: 按照父元素的尺寸设置.
- cover: 把背景图像扩展至足够大,背景图像 完全覆盖 背景区域。
- 把图像图像扩展至最大尺寸,使 宽高 完全适应 内容区域.
圆角矩形:border-radius: length(length:内切圆半径;border:边框)---> ------------>border-radius 使边框带圆角效果.
生成圆形:让 border-radius 的值为正方形宽度的一半
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */
border-radius: 50%;
}
生成圆角矩形:border-radius 的值为矩形高度的一半
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}