目录
一、CSS层叠样式表
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离
- HTML只是表示页面的结构和内容，那么CSS描述的就是页面的样式
二、CSS基本语法
- 选择器决定针对谁修改
- 声明决定修改什么
- 声明的属性是键值对.
- 使用 ; 区分键值对；使用 : 区分键和值
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
三、在HTML中使用CSS
- 在HTML文档中使用CSS样式表主要分为3种方式：内嵌样式、内部样式表、外部样式表
- 冒号后面带空格；选择器和 { 之间也有一个空格
1.内嵌样式
内嵌样式是对<body>和</body>之间的HTML标签直接设置style属性为CSS代码，它只对所在的HTML标签有效
<body>
<p style="color:black;font-weight:200">你好</p>
</body>2.内部样式表
内部样式表是在HTML文档的头部<head></head> 标签中间定义一对<style></style>标签，只对当前所在的网页有效
<style>
p {
color: red;
}
</style>
<p style="color:green">你好</p>3.外部样式表
当多个HTML网页使用同样的CSS规则时，把这些CSS规则放在一个以.css为扩展名的独立文件中，然后再网页中使用<link>引用这个HTML文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>你好</div>
</body>div {
color: red;
}
四、选择器
- 要先选中元素, 才能设置元素的属性
1.选择器的分类
选择器分为基础选择器和复合选择器
基础选择器：单个选择器构成的；分为标签选择器 类选择器 id 选择器 通配符选择器
复合选择器：把多种基础选择器综合运用起来；分为后代选择器 子选择器 并集选择器 伪类选择器
2.常见的选择器
2.1标签选择器
- 能快速为同一类型的标签都选择出来. 不能差异化选择
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>猫咪</p>
<p>猫咪</p>
<div>小狗</div>
2.2类选择器
- 差异化表示不同的标签 可以让多个标签的都使用同一个标签
<body>
<style>
.blue {
color: blue;
}
</style>
<div class="blue">猫咪</div>
<div>猫咪</div>
</body>
类名用 . 开头的
下方的标签使用 class 属性来调用
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代 码更好复用)
如果是长的类名, 可以使用 - 分割
不要使用纯数字, 或者中文, 以及标签名来命名类名
2.3id 选择器
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带 #
- id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)
<body>
<style>
#red {color: red;
}
#blue {color: blue;
}
</style>
<div id="blue">猫咪</div>
<div id="red">猫咪</div>
</body>
2.4伪类选择器
- 2.4.1链接伪类选择器
有一些特殊的HTML元素可以拥有不同的状态，例如，用于定义超链接的<a>标签就可以处于"没有被访问过"、"已经被访问过"、"鼠标悬浮"等好几种状态，
按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效
- a:link 选择未被访问过的链接
- a:visited 选择已经被访问过的链接
- a:hover 选择鼠标指针悬停上的链接
- a:active 选择活动链接(鼠标按下了但是未弹起)
<head>
<title>css</title>
<link rel="stylesheet" href="first.css">
<body>
<a href="http://www.baidu.com">百度一下，得到答案</a>
</body>
</head> a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: blue;
}
- 2.4.2force伪类选择器
选取获取焦点的 input 表单元素
<head>
<title>css</title>
<link href="first.css">
<body>
<div class="three">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>three>input:focus {
color: red;
}
2.5通配符选择器
- 使用 * 的定义, 选取所有的标签
- 页面的所有内容都会被改成 红色 . 不需要被页面结构调用
* {
color: red;
}五、常见的样式属性
1.字体属性
| 属性 | 描述 |
| font | 设置字体的所有属性 |
| font-family | 设置字体系列，微软雅黑等 |
| font-size | 设置字体大小 |
| font-style | 设置字体风格 |
| font-variant | 设置字体变体 |
| font-weight | 设置字体粗细 |
- 700 == bold, 400 是不变粗, == normal 取值范围是 100 -> 900
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<link rel="stylesheet" href="first.css">
<body>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
<div class="font-size">
<div class="one">
大大大
</div>
<div class="two">
小小小
</div>
</div>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
细细细
</div>
</div>
<div class="font-style">
<em>
斜体斜体
</em>
<div class="one">
正常
</div>
</div>
</body>
</head>
</html>.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
.font-style em {
font-style: normal;
}
.font-style div {
font-style: italic;
}
2.文本属性
| 属性 | 描述 |
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| line-height | 设置行高 |
| text-indent | 文本首行缩进 |
| text-decoration | 设定文本下划线 |
| text-align | 文本对齐 |
| vertical-align | 文本的垂直对齐方式 |
- 行高 = 上边距 + 下边距 + 字体大小 上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<link rel="stylesheet" href="first.css">
<body>
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>
<div class="text-decorate">
<div class="one">啥都没有</div>
<div class="two">下划线</div>
<div class="three">上划线</div>
<div class="four">删除线</div>
</div>
<div class="text-indent">
<div class="one">正常缩进</div>
<div class="two">反向缩进</div>
</div>
<div class="line-height">
<div>
上一行
</div>
<div class="one">
中间行
</div>
<div>
下一行
</div>
</div>
</body>
</head>
</html>.text-align .one {
text-align: left;
}
.text-align .two {
text-align: right;
}
.text-align .three {
text-align: center;
}
.text-decorate .one {
text-decoration: none;
}
.text-decorate .two {
text-decoration: underline;
}
.text-decorate .three {
text-decoration: overline;
}
.text-decorate .four {
text-decoration: line-through;
}
.text-indent .one {
text-indent: 2em;
}
.text-indent .two {
text-indent: -2em;
}
.line-height .one {
line-height: 40px;
font-size: 16px;
}
3.背景属性
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-attachment | 图片是否跟随内容滚动 |
| background-position | 背景图片的初始位置 |
| background | 设置背景的所有相关属性 |
| background-repeat | 背景平铺方式 |
| background-position | 设置背景位置 |
| background-size | 设置背景尺寸 |
| background-position | 设置背景位置 |
repeat: 平铺 no-repeat: 不平铺 repeat-x: 水平平铺 repeat-y: 垂直平铺
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<link rel="stylesheet" href="first.css">
<body>
</style>
<div class="bgc">
<div class="one">红色背景</div>
<div class="two">绿色背景</div>
<div class="three">透明背景</div>
</div>
<div class="bgi">
<div class="one">背景图片</div>
</div>
<div class="bgr">
<div class="one">不平铺</div>
<div class="two">水平平铺</div>
<div class="three">垂直平铺</div>
</div>
</body>
</head>
</html>body {
background-color: #f3f3f3;
}
.bgc .one {
background-color: red;
}
.bgc .two {
background-color: #0f0;
}
.bgc .three {
/* 背景透明 */
background-color: transparent;
}
.bgr .one {
background-image: url(3.jpg);
height: 100px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.bgr .two {
background-image: url(3.jpg);
height: 100px;
background-repeat: repeat-x;
background-position: center;
}
.bgr .three {
background-image: url(3.jpg);
height: 100px;
background-repeat: repeat-y;
background-position: center;
}
四、圆角矩形
通过 border-radius 使边框带圆角效果
length 是内切圆的半径. 数值越大, 弧线越强烈
1.生成圆形
- border-radius: 50%; ，内切圆半径=1/2的正方形宽度
div {
width:100px;
height: 100px;
background-color: red;
color: white;
border-radius: 50px;
/* border-radius: 50%; */
}
2.生成圆角矩形
- border-radius:length;length数值越大, 弧线越强烈
div {
width: 100px;
height: 100px;
background-color: red;
color: white;
border-radius: 10px;
}
五、盒子模型
每一个 HTML 元素就相当于是一个矩形的 "盒子" 这个盒子由这几个部分构成
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
1.边框属性
元素的边框就是围绕元素内容和内边距的一条或多条线
| 属性 | 描述 |
| border-style | 设定上下左右边框的风格 |
| border-width | 设定上下左右边框的宽度 |
| border-color | 设定上下左右边框的颜色 |
- 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
div {
width: 200px;
height: 100px;
border-width: 10px;
border-style: solid;
border-color: green;
}
2.间隙属性
用来设置元素内容到元素边界的距离
| 属性 | 描述 |
| padding-left | 设置左间隙的宽度 |
| padding-right | 设置右间隙的宽度 |
| padding-top | 设置上间隙的属性 |
| margin-bottom | 设置下间隙的属性 |
| Padding | 同时设置上下左右间隙属性 |
div {
height: 200px;
width: 300px;
border: 2px black solid;
padding-top: 5px;
padding-left: 10px;
}
3.边距属性
一个元素所占空间边缘到相邻元素之间的距离
| 属性 | 描述 |
| margin-left | 设置左边距的宽度 |
| margin-right | 设置右边距的宽度 |
| margin-top | 设置上边距的宽度 |
| margin-bottom | 设置下边距的宽度 |
| margin | 同时设置上下左右边距属性 |
<!DOCTYPE html>
<html>
<head>
<title>css</title>
<link rel="stylesheet" href="first.css">
<body>
</style>
<div class="one" >测试1</div>
<div class="two" >测试2</div>
</body>
</head>
</html> div{
width: 200px;
height: 100px;
border: 2px black solid;
box-sizing: border-box;
padding:5px ;
}
.one{
margin-bottom: 15px;
/* 给下方设置10px的间距 */
}
.two{
margin-top: 15px;
/* 给上方设置15px的间距 */
}
2591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
