目录
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;
}
1475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
