层叠样式表
当浏览器读到一个样式表, 它就会按照这个样式表来对文档进行格式化 (渲染)
注释
- /* 单行注释 */
- /*
- 多行注释
- */
语法结构
选择器 {属性: 属性值; 属性: 属性值; 属性: 属性值;}
h1 {color:red;font-size:14px;}
三种引入 CSS 样式的方式
1 head 内 style 标签内部直接书写 CSS 代码
- <head>
- <meta charset="UTF-8">
- <title>title</title>
- <style>
- p {
- background-color:red;
- }
- </title>
- </head>
- (背景框会展示出来)
2 link 标签引入外部 CSS 文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3 直接在标签内通过 style 属性书写 CSS 样式
<p style="color:red"> hello Word.</p>
!!! CSS 样式通常都应该写在单独的 CSS 文件中
CSS 的流程
1 选学习如何查找标签
基本选择器
标签选择器
id 选择器
类选择器
通用选择器
组合选择器
后代选择器
二字选择器
毗邻选择器
弟弟选择器
属性选择器
伪类选择器
伪元素选择器
基本选择器
标签选择器 所有 span 标签的颜色都是红色
- <style>
- span {color:red;}
- <style>
id 选择器 将 id 所对应的标签样式修改
- <style>
- #s1 {font-size: 24px;}
- <style>
类选择器 会把所有的类包裹继承的标签颜色都改成一样的 还有类下面的子标签 子子标签
- .c1 {color: #43ceff
- }
通用选择器 会把所有没有标签样式的都改为一样的标签颜色
- * { color: #ff100c
- }
如果是一个类选择器 和一个通用选择器的话 会出现
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .c1 {color: #43ceff } * { color: #ff100c }
- </style>
- </head>
- <body>
- <span id="s1">
- span
- </span>
- <div class="c1">
- div
- <p>
- p
- <span>
- span
- </span>
- </p>
- </div>
- <div class="c1">
- div
- </div>
- </body>
- </HTML>
这是下面相同选择器 级别不同 类的优先级权重 高于 通用的 类先把所有的类自己的包括内部的和继承的改为类选择器颜色
后面 按照从上往下的执行顺序的时候 通用选择器在把 所有没有选择器的标签颜色改为通用的颜色
组合选择器
后代选择器 后面里面所有的 span 标签都变成蓝色 子子孙孙
- <style>
- div span {
- color: blue;
- }
- </style>
儿子选择器 把 div 里面所有被 div 包含的 span 找到 (只找儿子 这一级) 都改为红色
- <style>
- div>span {
- color: red;
- }
- </style>
毗邻选择器 + 对下不对上 (且只找最近的一个) 都改为蓝色
- <style>
- div+span {
- color: blue;
- }
- </style>
弟弟选择器 ~ 对下不对上 只要是同级别的 在 div 后面的都是它弟弟
- <style>
- div~span {color: deeppink}
- </style>
属性选择器
只要有 xxx 属性名的标签都找到 [xxx] {color:red;}
- <style>
- [xxx] {color: red}
- </style>
只要标签有属性名为 xxx 并且值为 1 [xxx='1'] {color:blue;}
- <style>
- [xxx='1'] {color: blue}
- </style>
规定 p 标签内部徐徐有属性名为 xxx 并且值为 2 的标签 p[xxx='2'] {color:green;}
- <style>
- /* 规定 p 标签里面内部必须有属性名为 xxx 并且值为 2 的标签 */
- p[xxx='2'] {color: green;}
- </style>
分组与嵌套
div 标签一个样式 p 标签一个样式 span 标签一个样式
- <style>
- div {color: red;}
- p {color: red;}
- span {
- color: red;}
- </style>
分组 div ,p,span {color :blue;} 就是把上面单个单个的标签选择器 简写
- <style>
- /* 分组 */
- div,p,span {color: red}
- </style>
嵌套: 不同的选择器可以共用一个样式 后代选择器与标签选择器组合使用
- <style>
- /* 嵌套: 不同的选择器可以使用同一个样式
- 后代选择器与标签组合使用
- */
- div p,span {color: yellow}
- </style>
伪类选择器
针对的是 a 连接标签 四种状态 未点击时 鼠标悬浮上面 点击时 点击后返回
- <style>
- /* 未点击时 */
- a:link {
- color: red;
- text-decoration:None;
- }
- /* 鼠标悬浮上面 */
- a:hover {
- color: yellow;
- }
- /* 点击时 */
- a:active {
- color: black;
- }
- /* 点击后返回 */
- a:visited {
- color: green;
- }
- </style>
补充: input:focus{ /*input 输入框获取焦点时样式 */
background-color:red;} 文本框输入的时候可以显示文本框的背景颜色
text-decoration: None; 连接下划线去掉
伪元素选择器
可以设置手字母样式 可以在标签前面添加内容 可以在标签后面添加内容
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /* 首字母大写 并且设置颜色红色 */ p:first-letter { color: red; font-size: 24px; } /*
- 在 p 标签前面加上内容 */ p:before{ content: '这是添加的内容'; color: orangered; } /* 这是标签后面添加的内容
- */ p:after{ content: '这是后面添加的'; color: orange; font-size: 48px; }
- </style>
- </head>
- <body>
- <p>
- 继承是 CSS 的一个主要特征, 它是依赖于组向圣诞节放假快乐
- </p>
- <p>
- 继承是 CSS 的一个主要特征, 它是依赖于组向圣诞节放假快乐
- </p>
- <p>
- 继承是 CSS 的一个主要特征, 它是依赖于组向圣诞节放假快乐
- </p>
- </body>
- </HTML>
2 如何给查找到的标签设置样式
id 用来唯一标识标签
class 标签类属性 (*****), 可以由多个值
可以理解成 python 面向对象的继承
3 你可以给任意的标签加任意的属性名和属性值
- <style>
- p[xxx='2'] {color:red;}
- </style>
- <p xxx='2'>
- ppp
- </p>
4 研究选择器优先级
相同选择器 不用的引入方式 就近原则 谁越靠近标签谁说了算
不同选择器 相同的引入方式
行内样式 > id 选择器 > 类选择器 > 标签选择器
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /*id 选择器 */ #p1 {color: green;} /* 类选择器 */ .c1 {color: aqua;} /* 标签选择器
- */ p {color: red;}
- </style>
- <!-- 标签选择器 -->
- <link rel="stylesheet" href="mycss.css">
- </head>
- <body>
- <p id="p1" class="c1" style="color: blue">
- p
- </p>
- </body>
- </HTML>
5 如何修改标签样式
样式修改
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div {width: 400px; height: 100px;} p {font-size: 16px; font-weight: bolder;}
- </style>
- </head>
- <body>
- <div>
- div
- </div>
- <div>
- div
- </div>
- <p>
- 坚实的科技了解了解
- </p>
- </body>
- </HTML>
font-weight 用来设置字体的自重 (粗细)
文本颜色
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- p { /*color: orange;*/ /*color: rgb(0,0,255)*/ /*color:#ff100c;*/ /* 最后一个参数控制的是透明度
- */ color: rgba(0,0,234,0.3); }
- </style>
- </head>
- <body>
- <p>
- 这是文本颜色修改的
- </p>
- </body>
- </HTML>
文本属性
文本内容是右对齐 right 左对齐 left(默认) 居中 center justify 两端对齐
本文内容上面加下划线 overline
下面加下划线 underline
作废线 (穿过文本下的一条线) line-through
缩进 text-indent
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- p { /* 把 p 标签内容 右对齐 */ /*text-align: right;*/ /*text-align: center;*/
- /*text-align: left;*/ /* 把 p 标签内容下面加上下划线 */ text-decoration: underline;
- /* 把 p 标签内容上面加一条下划线 */ /*text-decoration: overline;*/ /*p 标签内容有一条横线 和作废一段话一样
- */ /*text-decoration: line-through;*/ /* 把 p 标签内容缩进 48px 像素位置 */ text-indent:
- 48px; } /* 连接下划线去掉 */ a {text-decoration: none}
- </style>
- </head>
- <body>
- <p>
- 以把多个字体名称作为
- </p>
- <a href="https://www.baidu.com">
- 百度
- </a>
- </body>
- </HTML>
背景属性
背景颜色 background-color
背景图片填充 background-image:url('图片')
是否重复 repeat(默认): 背景图片平铺排满整个网页
repeat-x : 背景图片只在水平方向上平铺
repeat-y: 背景图片只在垂直方向上平铺
not-repeat: 背景图片不平铺
background-repeat:no-repeat;
背景位置 background-position:left top;
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div { width: 400px; height: 400px; /* 背景颜色 */ /*background-color: orange;*/
- /*background-image: url("1.png");*/ /*!* 不重复 *!*/ /*background-repeat:
- no-repeat;*/ /*!* 位置 left 左面居中对齐 *!*/ /*background-position: center;*/
- /* 支持简写 */ background: no-repeat center url("1.png") orange; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
背景图片示例 设置图片宽度 颜色 背景可以支持固定其他页面划动
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- .c1 { height: 400px; background-color: tomato; } .box { height: 400px;
- background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=450,600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
- /* 背景附件 固定的 */ background-attachment: fixed; /* 可以只填充一个不重复的图片 且 图片周围有背景色
- 支持滑动 */ /*height: 400px;*/ /*background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh=450,600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");*/
- /*background-color: orange;*/ /*background-repeat: no-repeat;*/ /*background-position:
- center;*/ /*background-attachment: fixed;*/ } .c2 { height: 400px; background-color:
- red; } .box1 { height: 400px; background: url("jie.jpg"); background-position:
- center; /* 背景附件 固定的 */ background-attachment: fixed; } .c3 { height: 400px;
- background-color: fuchsia; }
- </style>
- </head>
- <body>
- <div class="c1">
- </div>
- <div class="box">
- </div>
- <div class="c2">
- </div>
- <div class="box1">
- </div>
- <div class="c3">
- </div>
- </body>
- </HTML>
边框
边框宽度 border-width
边框是实线, 虚线 border-style;
颜色 border-color;
边框样式
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div { border: 3px solid red; /*border-width: 3px;*/ /*!*dashed 虚线 *!*/
- /*border-style: dashed;*/ /*border-color: deeppink;*/ }
- </style>
- </head>
- <body>
- <div>
- div
- </div>
- </body>
- </HTML>
画圆
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- div { width: 400px; height: 400px; background-color: red; /* 边框颜色 实线 3px*/
- border: 3px solid black; /* 半径是边缘的 50%*/ border-radius: 50%; }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </HTML>
display 属性
none 将块级标签内容隐藏起来并让位置
inline 将块级标签变成行内标签
block 将行内属性变成块级标签
inline-block 将选择的标签即具有行内标签特点又有块级标签的特点
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- /*div {*/ /*!* 将 div 标签内容隐藏起来 让出来位置 *!*/ /*display: none;*/ /*}*/ /*div
- {*/ /*!*inline 将款及标签变成行内标签 *!*/ /*display: inline;*/ /*}*/ /*span {*/ /*!*block
- 块 将行内标签变成 块级标签 *!*/ /*display: block;*/ /*}*/ span { /* 将选择的标签即具有行内标签特点又有块级标签的特点
- */ display: inline-block; height: 400px; width: 400px; background-color:
- red; border: 3px solid black; }
- </style>
- </head>
- <body>
- <div>
- div
- </div>
- <div>
- div
- </div>
- <span>
- span
- </span>
- <span>
- span
- </span>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3076053.html