基本概念
CSS（Cascading Style Sheet）级联样式表，用来控制页面布局与页面样式
比如可以修改颜色、大小、位置、层级、动画等等
CSS 的三种位置
CSS 行内样式
写在 HTML 元素的开始标签里，只对当前行生效
特点：只能给一个元素使用，复用性差
<h4 style="color:red;">我是标题</h4>-
CSS 内部样式
写在 head 标签中的 style 标签里，对当前页面所有元素生效
特点：随着当前页面加载而加载，加载速度快，首页常用
<head>
<style>
/* 标签名选择器 */
h1 {
color:red;
}
</style>
</head>-
CSS 外部样式
写在独立的.css 文件中，在html 文件中引入外部的.css 文件
-
rel：必写属性，表示引入文件是什么类型 stylesheet 样式表
-
href：要引入 CSS 文件的路径
特点：可以被多个页面共享，复用性强，常用于二三级页面
<html>
<head>
<link rel="stylesheet" href="01.css">
</head>
</html>
CSS优先级
-
渲染同一个元素，样式不同会叠加生效,比如背景色和文字颜色会同时生效
-
如果渲染的样式相同，按照如下优先级排序：
-
!important > 行内样式>（内部样式=外部样式）>浏览器自带的样式
-
内部样式与外部样式优先级一样，后写的样式会把之前的样式覆盖掉
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS优先级</title> <!-- 2.内部样式 对当前页面上所有被选中的元素生效 --> <style> h2 { color: green; } </style> <!-- 3.外部样式 可以被多个页面引入--> <link rel="stylesheet" href="01.css"> </head> <body> <h2 style="color: red;">CSS优先级</h2> </body> </html>
/*外部的01.css文件*/
h2 {
color: blue;
}
-
常用选择器速查
-
标签名选择器：选中指定标签的所有元素，写法： 标签名 { CSS 样式 }
-
类选择器：选中指定的一类元素，写法： .class值 { CSS 样式 }
-
id 选择器：选中指定的一个元素，写法： #id值 { CSS 样式 }
-
伪类选择器：
-
选中超链接未被访问时时的状态，写法：a:link{ CSS 样式 }
-
选中超链接已被访问时的状态，写法：a:visited{ CSS 样式 }
-
选中元素的悬停状态（非超链接独有），写法： div:hover{ CSS 样式 }
-
选中超链接激活时的状态，写法：a:active{ CSS 样式 }
-
注意：a 标签伪类的顺序： :link :visited :hover :active
-
-
群组选择器：选中多种不同的元素，写法： #id 值，.class 值，标签名{ CSS 样式 }
-
通用选择器：选中所有元素，写法： *{ CSS 样式 }
-
属性选择器：选中指定属性与属性值的元素，写法： [type="text"]{ CSS 样式 }
-
后代选择器：选中祖先元素中包含的所有后代元素，写法： div span{ CSS 样式 }
-
子代选择器：选中父元素中下的直接子元素，写法： div>span{ CSS 样式 }
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> /* 标签名选择器 */ h4 { color: red; } div { width: 120px; height: 120px; background-color: cyan; } /* id选择器 */ #d2 { color: red; } /* 类选择器 */ .error { background-color: red; } .success { background-color: green; } .msg { color: white; } /* 伪类选择器 :hover选中元素的悬停状态*/ /* 紧挨着写 #d2与:hover 是与的关系,只有同时满足才可以被选中 */ #d2:hover { background-color: pink; } /*群组选择器 只要满足其中一个,就可以被选中*/ #d2,h4,.error { text-decoration: underline; } /* 通配选择器 匹配所有元素*/ * { font-style: italic; } a:link { /* 选中超链接未被访问过的状态 */ color: gray; } a:visited { /* 选中超链接已经被访问过的状态 */ color: green; } a:hover { /* 选中元素悬停时的状态(不是超链接独有的) */ color: red; } a:active { /* 选中超链接激活时的状态 */ color: orange; } /* 属性选择器 */ input[type="text"] { background-color: yellow; } /* 后代选择器 选中包含在内的所有后代元素 子元素 孙元素...*/ #d1 span { background-color: magenta; } /* 子代选择器 大于号,选中本元素的直接子元素 可以逐级向下写多层 */ #d1>div>span { color: yellow; } </style> </head> <body> <h4>我是标题</h4> <p>我是段落</p> <a href="#">我是超链接</a> <h4>我是标题</h4> <div>我是div1</div> <div id="d2">我是div2</div> <div>我是div3</div> <hr> <span class="error msg">用户名已被占用</span> <span class="error msg">操作失败</span> <br> <span class="success msg">有效的手机号</span> <span class="success msg>新增成功</span> <hr> <a href="https://www.baidu.com">百度首页</a> <a href="abc">错误地址</a> <hr> <input type="text"> <input type="password"> <hr> <div id="d1"> <span>1</span> <div> <span>2</span> <b>测试</b> </div> <span>3</span> </div> </body> </html> -
CSS 常用值
-
px：像素，屏幕上最小的一个发光点
-
颜色表示法：
-
单词表示，如：red
-
十六进制表示法，如：color：#0000FF；
-
前两位表示红色，中间两位表示绿色，最后两位表示蓝色
-
-
简写的十六进制表示法，如：color：#00F；
-
三种颜色两位数字都相同，才可以简写
-
-
rgb（red，green,blue）表示法，如：color：rgb（0,0,255）；
-
值的范围是 0～255
-
-
rgba（red，green, blue，alpha）表示法，如：color：rgba（0，0,255，0.5）；
-
不透明度，0 表示完全透明，1 表示完全不透明
-
-
-
背景图处理
背景颜色：background-color:#fff；
-
颜色可以使用任何的色值（十六进制 rgb rgba 单词等） 背景颜色会在元素的最底层
背景图片插入：background-image:url（路径）；
-
注意：背景图和 img 标签的图片插入是有区别的！
-
img 标签插入的图片在默认情况下直接就能显示图片
-
背景图必须给所在元素设置宽高才能显示出来
图片重复问题：background-repeat
-
图片被平铺到元素中会出现两种情况：
-
图片大于元素，图片显示不全
-
图片小于元素，会重复，哪个方向有空余空间，就向哪个方向重复
-
background-repeat: no-repeat; 背景图仅显示一次，不重复
-
background-repeat: repeat; 默认值，X-Y 轴都重复
-
background-repeat: repeat-x; 仅在 X 轴（水平方向）重复
-
background-repeat: repeat-y; 仅在 Y 轴（垂直方向）重复
背景图尺寸：background-size
-
没有设置任何尺寸时，默认使用图片本身的大小
-
设置尺寸时，值 1 是背景图的宽度，值 2 是背景图的高度
-
background-size: 600px 300px;
-
background-size: 100% 100%;
-
注意：图片比例要合适，否则会尺寸失真
background-position:left top; 默认值（左上）
-
第一个值表示水平方向 第二个值表示垂直方向
-
X 轴（水平方向）的值：left 左 center 中 right 右
-
Y 轴（竖直方向）的值：top 上 center 中 bottom 下
-
center center 表示水平与竖直方向均居中，可以简写成一个 center
-
还可以写像素值，原点（0px 0px）就是左上角
-
正值向右/向下移动；负值向左/向上移动
background-image: linear-gradient(270deg,red,blue);
-
线型渐变
-
可以设置多种渐变的颜色,使用逗号分隔
-
默认的角度是水平的,可以不加角度值
-
如果加了角度值,单位是deg,且角度值必须写在第一个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS常用值</title>
<style>
h1 {
color:red;
color: rgb(255,0,0);
color: rgb(0,255,255);
color: rgb(0,255,0);
color: rgb(255,0,255);
color: rgb(0,0,255);
color: rgb(255,255,0);
color: #FFFFFF;
color: #FFF;
color: #000000;
color: #000;
color: #808080;/*不能简写!*/
/* 带不透明度颜色 1完全不透明 0完全透明 0.x半透明 */
color: rgba(255,0,0,0.8);
color: rgba(255,0,0,0.6);
color: rgba(255,0,0,.4);
color: rgba(255,0,0,.2);
color: rgba(255,0,0,0);
color: rgba(255,0,0,1);
}
/* 块级元素的默认宽度为父级宽度的100%,高度为0靠内容撑起来 */
.d1 {
/*注意:插入背景图必须设置所在区域的大小!*/
width: 50px;
height: 100px;
background-image: url(img/mr.png);
/* 调整背景图大小 宽度 高度 */
background-size: 50px 100px;
/* 可以同时显示背景色 没图的地方显示背景色 */
background-color: cyan;
}
/* 500*300 5像素的红色边框 插入鸣人背景图 */
.d2 {
width: 500px;
height: 300px;
border: 5px solid #f00;
background-image: url(img/mr.png);
/* 设置背景图不允许重复 */
background-repeat: no-repeat;
background-position: 0 0;/* 原点是左上角 */
background-position: -50px 0;/*向左*/
background-position: 0 50px;/*向下*/
background-position: -50px -50px;/*左上*/
background-position:center;
background-position:50% 50%;
background-position:100% 100%;/*右下角*/
}
.d3 {
width: 500px;
height: 300px;
/* 线型渐变 角度值 颜色1 颜色2...*/
background-image: linear-gradient(270deg,red,blue);
}
</style>
</head>
<body>
<h1>测试颜色</h1>
<!-- .d*3 Tab补全-->
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
-
字体处理
color： 设置文字颜色
font-size ：设置文字的大小
-
谷歌浏览器默认字体大小 16px，最小 12px，低于 12px 也以 12px 显示
font-family: “幼圆”； 设置文字字体
-
执行顺序是从前向后执行的
-
字体名称要使用引号包裹
-
商用字体要考虑到版权问题
-
尽量少用奇怪的字体，因为客户可能会没有
字体文件在电脑 C 盘的“Fonts”文件夹中
打开“计算机”->C 盘-> “Windows”-> “Fonts”即可看到所有已安装的字体
text-decoration ：设置文本修饰线
-
underline 下划线
-
none 去掉所有修饰线
-
line-through 添加一条删除线
line-height：设置文本行高
-
称为行间距，指的是行与行文本之间的距离
-
如果需要单行文字在元素内垂直居中，可以让行高为元素的高度即可
text-align ：设置块级元素内文本的水平对齐方式
-
对齐方式：left 左对齐 / center 居中对齐 / right 右对齐
text-shadow: 20px 20px 5px red;
-
文本阴影：X 轴偏移量 Y 轴偏移量 羽化值 阴影颜色
font-weight :字重（字体粗细），可取值：
-
normal 400 正常体
-
lighter 300 细体
-
bold 600 粗体
font-style: italic; 文字倾斜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字处理</title>
<style>
p {
/*文字大小 谷歌浏览器默认的字号是16px 最小字号12px*/
font-size: 30px;
/*字体 可以设置多个*/
font-family: "幼圆uuuu","宋体";
}
a {
/*文本修饰线*/
text-decoration: none; /*去除修饰线*/
text-decoration: line-through;/*删除线*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*顶部线*/
}
div {
width: 200px;
height: 200px;
border: 5px solid #00f;
/*文字水平对齐方式:居中*/
text-align: center;
/*行高:设置行与行之间的距离
如果单行文字的行高与div一样高，可以设置文字垂直居中效果*/
line-height: 200px;
}
h1 {
/*字体字重*/
font-weight: bold;/*加粗*/
font-weight: normal;/*正常体*/
font-weight: lighter;/*细体*/
font-style: italic;/*字体样式:斜体*/
}
span {
/*文本阴影:X轴偏移量 Y轴偏移量 羽化值 阴影颜色
水平方向:正数向右 负数向左
垂直方向:正数向下 负数向上
羽化值:数值越大，阴影越模糊*/
text-shadow: 20px -50px 2px red;
}
</style>
</head>
<body>
<p>我是测试文字 123 ABC abc</p>
<a href="#">超链接</a>
<div>
测试文字
</div>
<span>测试文字</span>
<h1>标题字</h1>
</body>
</html>
扫一扫
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
