目录
基本语法规范
选择器 {
一条/N条声明
}
<style>
p{
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>CSS中的注释为 /*注释内容*/
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内.
引入方式
内部样式表
写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中
行内样式表
通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效
这种写法优先级较高, 会覆盖其他的样式
例如此处，红色被覆盖
外部样式
div {
color: yellow;
}实际开发中最常用的方式
1. 创建一个 css 文件
2. 使用 link 标签引入 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标签中 -->
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<!-- 外部样式要用link标签引入 -->
<link rel="stylesheet" href="demo3.css">
</head>
<body>
<p>这是一个内部样式</p>
<p style="color:blue">这是一个行内样式</p>
<div>
这是一个外部样式
</div>
</body>
</html>代码风格
样式格式
1.紧凑风格
p { color: red; font-size: 30px;}2.展开风格（推荐）
p {
color: red;
font-size: 30px;
}样式大小写
虽然 CSS 不区分大小写, 我们开发时统一使用小写字母
空格规范
冒号后面带空格
选择器和 { 之间也有一个空格
选择器
选择器的功能
选中页面中指定的标签元素.
选中指定的元素之后，才能修改元素的属性
选择器的种类
基础选择器
标签选择器
选择同一类型的标签
类选择器
选择相应class类属性的标签
类名包含数字字母和-，同时不能是数字开头，不能是中文，也不能是标签名
一个标签可以使用多个类，一个类也可以定义多个标签
id选择器
选择相应id的标签
通配符选择器
使用*选取所有标签
总结
复合选择器
后代选择器
先指定一个父元素，再指定一个子元素
后代也可以是孙子元素
后代可以是任意基础选择器的组合
后代选择器也可以有很多层
子选择器
和后代选择器类似，但是只能选择子标签
之选亲儿子，不选择孙子元素
<!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>
* {
/*通配符选择器*/
background-color: beige;
}
div {
/*标签选择器*/
color: red;
}
.green {
/*类选择器*/
color: green;
}
.font {
font-size: 30px;
}
#yellow {
/*id选择器*/
color: yellow;
}
ol li {
/*后代选择器*/
color: blue;
}
ol a {
color: pink;
}
.list ul a {
color: blueviolet;
}
.list>li>a {
/*子选择器*/
font-size: 30px;
}
h2,h3 {
/*并集选择器*/
color: brown;
}
</style>
</head>
<body>
<div>标签选择器</div>
<div class="green">类选择器</div>
<div class="green font">一个标签可以使用多个类，一个类也可以定义多个标签</div>
<div id="yellow">id选择器</div>
<ul class="list">
<li>
<a href="#">后代可以是任意基础选择器的组合</a>
</li>
</ul>
<ol>
<li>后代选择器</li>
<li>
<a href="#">后代也可以是孙子</a>
</li>
</ol>
<h2>并集表达式1</h2>
<h3>并集表达式2</h3>
</body>
</html>伪类选择器
1.链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
2.force伪类选择器
选取获取焦点的元素
<!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>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<input type="botton" value="按钮">
<br/>
<div class="class">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<style>
/*链接伪类选择器*/
a {
font-size: 30px;
}
a:link {
/*未被访问过*/
color: blue;
}
a:visited {
/*访问过*/
color: purple;
}
a:hover {
/*鼠标悬停*/
color: red;
}
a:active {
/*鼠标按下未松开*/
color: green;
}
input {
/*鼠标没有放上去时的颜色*/
color: red;
}
input:hover {
/*鼠标放上去时的颜色*/
color: green;
}
.class>input:focus {
color: blue;
}
</style>
</body>
</html>总结
常用元素属性
字体属性
设置字体
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
如果字体名有空格, 使用引号包裹.
大小
p {
font-size: 20px;
}不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
可以给 body 标签使用 font-size
要注意单位 px 不要忘记.
标题标签需要单独指定大小
粗细
p {
font-weight: bold;
font-weight: 700;
}可以使用数字表示粗细.700 == bold,
400 是不变粗, == normal
取值范围是 100 -> 900
文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;文本属性
文本颜色
div {
color: red;
color: #ff0000;
color: rgb(255,0,0);
}如果是(0,0,0)那就是黑色
如果是(255,255,255)那就是白色
文本对齐
div {
text-align: left;
}控制文字水平方向上的对齐
center: 居中对齐
left: 左对齐
right: 右对齐
文本装饰
div {
text-decoration: underline;
}underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]
文本缩进
p {
text-indent: 2em;
}控制段落的首行缩进
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了）
行高
p {
line-height: 40px;
}行高就是上边距 + 下边距 + 字体大小
背景属性
背景颜色
body {
background-color: aliceblue;
}默认是透明的
背景图片
body {
background-image: url(fy.jpg);
}url 不要遗漏.
url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加
背景平铺
body {
background-repeat: no-repeat;
}repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
默认时平铺
背景位置
body {
background-color: aliceblue;
background-image: url(fy.jpg);
background-repeat: no-repeat;
background-position: center;
}背景位置
参数有三种风格:
1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位
背景尺寸
body {
background-color: aliceblue;
background-image: url(fy.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
圆角矩形
通过 border-radius 使边框带圆角效果.
基本用法
<div>
哈哈
</div>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 10px;
}
</style>length 是内切圆的半径. 数值越大, 弧线越强烈
效果
生成圆形
<div>
哈哈
</div>
<style>
div {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 100px;
}
</style>让 border-radius 的值为正方形宽度的一半即可.
效果
生成圆角矩形
<div>
哈哈
</div>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
border-radius: 50px;
}
</style>让 border-radius 的值为矩形高度的一半即可
效果
展开写法
<div>
哈哈
</div>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
/*等价于这样写，按照顺时针排列*/
/*border-radius: 10px 20px 30px 40px;*/
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
}
</style>border-radius 是一个复合写法. 实际上可以针对四个角分别设置.
效果
Chrome调试工具--查看CSS属性
打开浏览器
有两种方式可以打开Chrome调试工具
F12
右键=>检查元素
标签页含义
elements元素：查看标签结构
console控制台：查看控制台
source源代码：查看源码+断点调试
network网络：查看前后端交互过程
application应用程序：查看浏览器提供的一些扩展功能(本地存储等)
elements元素标签页使用
ctrl + 滚轮进行缩放,ctrl + 0 恢复原始大小
使用 左上角 箭头选中元素
右侧可以查看当前元素的属性, 包括引入的类.
右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如字体大小, 可以使用方向键来微调数值.
此处的修改不会影响代码, 刷新就还原了
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
元素的显示模式
块级元素
h1 - h6 p div ul ol li ...
行内元素/内联元素
a strong b em i del s ins u span ...
行内元素和块级元素的区别
1.是否独占一行
2.块级元素，高度，宽度，内外边距，行高...都是可以控制的；行内元素，高度，宽度，行高都是无效的，左右外边距有效，上下无效，内边距无效
<!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>
</head>
<body>
<style>
.demo2 span {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div class="demo2">
<span>child1</span>
<span>child2</span>
<span>child3</span>
</div>
</body>
</html>效果
3.块级元素默认的宽度就是和父元素一样，行内元素默认宽度就是和本身内容有关（如果没有内容，宽度就是0了）
4.块级元素内部都可以容纳其他块级元素，行内元素内部只能包含行内元素，不能包含块级元素
改变显示模式
使用 display 属性可以修改元素的显示模式
可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素
display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素
display: none隐藏元素
盒模型
每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成
边框 border
内容 content
内边距 padding
外边距 margin
边框
基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
<div>
哈哈哈哈哈哈哈
</div>
<style>
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: dotted;
border-color: green;
}
</style>效果（边框会撑大盒子）
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* {
box-sizing: border-box;
}
支持简写, 没有顺序要求
border: 1px solid red;可以改四个方向的任意边框
border-top/bottom/left/right以下的代码只给上边框设为红色, 其余为蓝色
利用到的层叠性, 就近原则的生效
border: 1px solid blue;
border-top: red;内边距
padding 设置内容和边框之间的距离.
基础写法
默认内容是顶着边框来放置的. 用 padding 来控制这个距离
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
<div>
哈哈哈哈哈哈哈
</div>
<style>
div {
width: 500px;
height: 250px;
padding-left: 20px;
padding: 40px;
background-color: aqua;
}
</style>效果
复合写法
可以把多个方向的 padding 合并到一起.
<div>
哈哈哈哈哈哈哈
</div>
<style>
div {
width: 500px;
height: 250px;
/*padding: 5px; */
/*表示四个方向都是 5*/
/*pxpadding: 5px 10px; */
/*表示上下内边距 5px, 左右内边距为 10*/
/*pxpadding: 5px 10px 20px; */
/*表示上边距 5px, 左右内边距为 10px, 下内边距为 20*/
pxpadding: 5px 10px 20px 30px;
/*表示 上5px, 右10px, 下20px, 左30px (顺时针)*/
background-color: aqua;
}
</style>外边距
基础写法
控制盒子和盒子之间的距离.
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right
<div class="one">
第一个
</div>
<div class="two">
第二个
</div>
<style>
.one {
width: 200px;
height: 200px;
background-color: aqua;
margin-bottom: 20px;
}
.two {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>效果
复合写法
规则同 padding
paddingmargin: 10px;
/*四个方向都设置*/
margin: 10px 20px;
/*上下为 10, 左右 20*/
margin: 10px 20px 30px;
/*上 10, 左右 20, 下 30*/
margin: 10px 20px 30px 40px;
/*上 10, 右 20, 下 30, 左 40*/块内元素水平居中
前提:指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto
三种写法均可.
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;例如：
<div>
哈哈哈哈
</div>
<style>
div {
width: 500px;
height: 200px;
background-color: red;
margin: 0 auto;
}
</style>效果
去除浏览器默认样式
浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别
为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式
使用通配符选择器即可完成这件事情
* {
marign: 0;
padding: 0;
box-sizing: border-box;
}弹性布局
flex布局基本概念
flex 是 flexible box 的缩写. 意思为 "弹性盒子".
任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式
<div class="one">
<span class="child1">
child1
</span>
<span class="child2">
child2
</span>
</div>
<style>
.one {
height: 200px;
background-color: aqua;
display: flex;
}
</style>效果
被设置为 display:flex 属性的元素, 称为 flex container
它的所有子元素立刻称为了该容器的成员, 称为 flex itemflex item
可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)
常用属性
justify-content
设置主轴上的子元素排列方式.
<div class="one">
<span class="child1">
child1
</span>
<span class="child2">
child2
</span>
</div>
<style>
.one {
height: 200px;
background-color: aqua;
display: flex;
justify-content: space-around;
}
</style>效果
align-items
设置侧轴上的元素排列方式
<div class="one">
<span class="child1">
child1
</span>
<span class="child2">
child2
</span>
</div>
<style>
.one {
height: 200px;
background-color: aqua;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>效果
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
