文章目录
一、 CSS二、 注释三、 语法四、 选择器分类优先级1. id选择器2. class选择器3. 元素选择器五、 样式表style优先级1. 行内样式2. 内部样式3. 外部样式六、 CSS常用样式1. 颜色color取值方式2. 宽高width height3. 背景background全部属性3.1 背景颜色color3.2 背景图像image3.3 图像重复repeat3.4 图像附着attachment3.5 图像位置position简写形式4. 边框border全部属性4.1 样式style4.2 宽度width4.3 颜色color简写形式5. 文本样式6. 列表样式简写形式设置列表的颜色样式七、 盒子模型概念盒子的宽度和高度元素的宽度和高度外边距margin简写属性外边距合并内边距Padding简写属性轮廓(区别于边框)轮廓样式轮廓宽度轮廓颜色简写属性轮廓偏移一、 CSS
CSS,Cascading Style Sheets的缩写
CSS 指的是层叠样式表,是一种描述HTML文档样式的语言
CSS描述如何在屏幕、纸张或其他媒体上显示 HTML 元素将内容展示和样式控制分离CSS 节省了大量工作,外部样式表通常保存在外部文件 .css中,可以同时控制多张网页的布局CSS类似于化妆,通过不同的CSS将同样的HTML内容打造为不同的呈现结果
二、 注释
CSS注释以 /* 开始, 以 */ 结束
三、 语法
CSS 规则集由选择器和声明块组成
选择器指向需要设置样式的 HTML 元素
(筛选具有相似特征的元素)
声明块包含一条或多条声明(每条声明包含一个属性名称和一个值)
属性和属性值之间用冒号分割,不同的属性之间用分号隔开
多条 CSS 声明用分号分隔,声明块用花括号括起来
选择器 {属性1:值1;属性2:值2;...}
代码示例:
选择器内容在下文
此以元素选择器为例
p {/*CSS 中的选择器(指向要设置样式的 HTML 元素:<p>)*//*声明: 属性名称:值 */color: red;/*color 是属性,red 是属性值*/text-align: center;/*text-align 是属性,center 是属性值*/}
四、 选择器
选择器,即用于“查找”(或选取)要设置样式的 HTML 元素
分类
1、简单选择器(根据名称、id、类来选取元素)
2、组合器选择器(根据特定关系来选取元素)
3、伪类选择器(根据特定状态选取元素)
4、伪元素选择器(选取元素的一部分并设置其样式)
5、属性选择器(根据属性或属性值来选取元素)
基本选择器有三种:id选择器、class选择器、元素选择器/标签选择器
下文选择器代码均为内部样式
优先级
ID选择器 > 类选择器 > 元素选择器
当多个选择器作用在同一个标签时
属性不同:看优先级
属性不同:叠加生效
1. id选择器
id 选择器使用HTML 元素的 id 属性来选择特定元素、指定特定的样式
元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素
要选择具有特定 id 的元素,请写一个井号#,后跟该元素的 id
tips:
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
语法:
#id属性名称{/*id 选择器以 "#" 来定义*/属性名:属性值}
代码示例:
<!DOCTYPE html><html><head><style>#demo1 {/*id 选择器以 "#" 来定义*/color: red;}</style></head><body><p id="demo1">Hello World!</p></body></html>
页面显示:
2. class选择器
类选择器选择有特定 class 属性的 HTML 元素
tips:
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
语法:
.class名称{/*类选择器以一个点"."号来定义*/属性名:属性值}
代码示例:
<head><meta charset="UTF-8"><style>#demo1 {/*id选择器,优先级最高*/color: deeppink;}p {/*元素选择器,优先级最低*/color: black;} .demo3 {/*类选择器,优先级中等*/text-align: center;color: darkmagenta;}</style></head><body><h3 class="demo3">使用了类选择器的标题</h3> <p class="demo3" >同时使用元素选择器的段落(class>元素)</p><p class="demo3" id="demo1">同时使用id选择器和元素选择器的段落</p></body>
页面显示:
3. 元素选择器
又称标签选择器,自动使用在所有同名的元素上,元素名称必须是html提供的元素
语法:
元素名称{属性名:属性值}
代码示例:
<head><meta charset="UTF-8"><style>#demo1 {color: deeppink;}p {color: black;} </style></head><body><p>段落1</p><p id="demo1">同时使用id选择器的段落2(就近原则,因此使用元素选择器)</p><p>段落3</p></body>
页面显示:
五、 样式表style
CSS的使用有三种样式,分为行内样式、内部样式、外部样式
作用域的范围
外部样式表>内部样式表>行内样式表
优先级
行内样式 > 内部样式 >外部样式
同样的样式作用于同一个标签:看优先级(就近原则)
不同样式作用于同一个标签:叠加生效
1. 行内样式
又称内联样式
通过使用标签内部的style属性直接在标签中编写样式
一般在测试的时候使用
<html标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello</html标签>
<div style="color: red;">hello my css</div>
tips:
只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高
2. 内部样式
通过style标签用CSS代码定义在head标签内
<!DOCTYPE html><html><head> <!--定义在head标签内--><meta charset="UTF-8"><title>内部样式</title><style>/*使用style标签,内部通过css代码实现*/div{color: red;}</style></head><body><div>hello my css</div></body></html>
3. 外部样式
步骤1、创建css资源文件
2、在head标签内,link标签引入外部样式文件
创建demo.css文件,放在与html页面同级的css文件夹中:
div {color: red;}
引入.css文件:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>外部样式</title><!--html页面中的引入--><link rel="stylesheet" href="css/demo.css" /></head><body><div>hello</div></body></html>
六、 CSS常用样式
1. 颜色color
取值方式
①单词
red blue…
②rgb三色取值
rgb(红,绿,蓝),三色的取值范围是0-255
例:rgb(255,0,0)表示红
③rgba取值
rgba(红,绿,蓝,透明度)透明度取值:0~1,0为全透明
例:rgba(255,0,0,1)表示红
④#值1值2值3
rgb的另一种十六进制写法,值的范式是00-FF
例:#FF0000表示红
2. 宽高width height
tips:
只有块状元素可以设置宽高,行级元素设置不生效
取值方式
1:数值 绝对数字 单位是像素PX
2:百分比:占据父元素的比例
3. 背景background
全部属性
3.1 背景颜色color
background-color 属性指定元素的背景色
不透明度
opacity(0~1)
代码示例:
<head><meta charset="UTF-8"><title>背景颜色</title><style>body {background-color: lightblue;}div {background-color: pink;}p {background-color: yellow;}</style></head><body><div>这是 div 元素内的文本<p>div中插入一段文字,这段为自己的颜色</p>仍然在 div 元素中</div></body>
页面显示:
3.2 背景图像image
background-image 属性指定用作元素背景的图像
默认情况下,图像会重复、覆盖整个元素
代码示例:
<head><meta charset="UTF-8"><title>背景图像</title><style>body {background-image: url(../../img/小奶猫1.JPG);}</style></head><body><p style="color: white; ">喵~</p></body>
页面显示:
3.3 图像重复repeat
默认情况下,background-image 属性在水平和垂直方向上都重复图像
repeat-x:横轴平铺
repeat-y:纵轴平铺
repeat:同时平铺
no-repeat:不平铺
3.4 图像附着attachment
background-attachment 属性指定背景图像是否应该随页面滚动
背景固定
body {background-image: url("cat.png");background-attachment: fixed;}
背景滚动
body {background-image: url("cat.png");background-attachment: scroll;}
3.5 图像位置position
background-position 属性用于指定背景图像的位置
后面可加位置(left、fight…)
也可加坐标(第一个参数表示x轴上偏移距离,第二个参数表示y轴上偏移距离)
代码示例:
<style>body {background-image: url(../../img/小奶猫1.JPG);background-repeat: no-repeat;background-position: left top;}</style>
页面显示:
简写形式
在使用简写属性时,属性值的顺序为:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
完整写法:
body {background-color: #ffffff;background-image: url("cat.png");background-repeat: no-repeat;background-position: right top;}
简写写法:
body {background: #ffffff url("tree.png") no-repeat right top;}
4. 边框border
border 属性允许指定元素边框的样式、宽度和颜色
均可以设置1~4个值(用于上边框、右边框、下边框和左边框)
全部属性
4.1 样式style
border-style 属性指定要显示的边框类型
tips:
除非设置了 border-style 属性,否则其他 CSS 边框属性不会有作用
代码示例1:
/* 四个值 */p {border-style: dotted solid double dashed; }/* 三个值 */p {border-style: dotted solid double; }/* 两个值 */p {border-style: dotted solid; }/* 一个值 */p {border-style: dotted; }
代码示例2:
<head><style>p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}</style></head><body><p class="dotted">点状边框。</p><p class="dashed">虚线边框。</p><p class="solid">实线边框。</p><p class="double">双线边框。</p><p class="groove">凹槽边框。</p><p class="ridge">垄状边框。</p><p class="inset">3D inset 边框。</p><p class="outset">3D outset 边框。</p><p class="none">无边框。</p><p class="hidden">隐藏边框。</p><p class="mix">混合边框。</p></body>
页面显示2:
4.2 宽度width
指定大小: px、pt、cm、em
4.3 颜色color
border-color 属性用于设置四个边框的颜色
如果未设置 border-color,则将继承元素的颜色
代码示例:
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */}
简写形式
为了缩减代码,也可以在一个属性中指定所有单独的边框属性
border属性是以下各个边框属性的简写属性:
border-width
border-style(必需)
border-color
代码示例:
p.b1 {border: 5px solid red;}/*左边框*/p.b2 {border-left: 6px solid red;background-color: lightgrey;}/*下边框*/p.b3 {border-bottom: 6px solid red;background-color: lightgrey;}/*圆角边框*/p.normal {border: 2px solid red;}p.round1 {border: 2px solid red;border-radius: 5px;}p.round2 {border: 2px solid red;border-radius: 8px;}p.round3 {border: 2px solid red;border-radius: 12px;}
5. 文本样式
代码示例:
<style>div {background-color: lightgrey;/*文本背景色*/color: blue;/*文本色*//*设置文本的水平对齐方式;文本可以左对齐、右对齐、居中对齐* * 当 text-align 属性为 "justify" ,将拉伸每一行使每一行具有相等的宽度* (就像在杂志和报纸中)*/text-align: center;/*direction 和 unicode-bidi 属性可用于更改元素的文本方向*/direction: rtl;unicode-bidi: bidi-override;/*vertical-align设置元素的垂直对齐方式*/vertical-align: top;/*text-decoration 属性用于设置或删除文本装饰* text-decoration: none; 通常用于从链接上删除下划线:* 其他 text-decoration 值用于装饰文本*/text-decoration: underline;/*text-transform用于指定文本中的大写和小写字母* 将所有内容转换为大写或小写字母,或将每个单词的首字母大写*/text-transform: uppercase;/*text-indent 属性用于指定文本第一行的缩进*/text-indent: 50px;/*letter-spacing 属性用于指定文本中字符之间的间距* 可以增加或减少字符之间的间距*/letter-spacing: 3px;/*line-height 属性用于指定行之间的间距*/line-height: 0.8;/*word-spacing用于指定文本中单词之间的间距*/word-spacing: 10px;/*white-space指定元素内部空白的处理方式*下例禁用元素内的文本换行*/white-space: nowrap;/*text-shadow 属性为文本添加阴影。* 最简单的用法是只指定水平阴影(2px)和垂直阴影(2px)* 向阴影添加颜色(红色):text-shadow: 2px 2px red;* 向阴影添加模糊效果(5px):text-shadow: 2px 2px 5px red;*/text-shadow: 2px 2px;}</style>
6. 列表样式
在 HTML 中,列表主要有两种类型:无序列表(<ul>),列表项用的是项目符号标记
有序列表(<ol>), 列表项用的是数字或字母标记CSS 列表属性作用:
①为有序列表设置不同的列表项标记
②为无序列表设置不同的列表项标记
③将图像设置为列表项标记
④为列表和列表项添加背景色
常用属性代码示例:
<style>li{/*list-style-type 指定列表项标记的类型* none 无样式* (none也可以用于删除标记/项目符号)* (列表拥有默认的外边距和内边距,删除内容在 <ul> 或 <ol> 中添加 margin:0 和 padding:0)* * circle 空心圆* square 正方形* upper-roman* lower-alpha* decimal 数字*/list-style-type: circle;/*list-style-image 将图像指定为列表项标记*/list-style-image: url(../../img/小奶猫1.JPG);/*list-style-position 指定列表项标记(项目符号)的位置* 默认:outside,点将在列表项之外,列表项每行的开头将垂直对齐* inside,点将在列表项内,是列表项的一部分,因此也是文本的一部分,并在开头推开文本*/list-style-position: outside;}</style>
简写形式
使用简写属性时,属性值的顺序为:list-style-type(如果指定了 list-style-image,那么在由于某种原因而无法显示图像时,会显示这个属性的值)
list-style-position(指定列表项标记应显示在内容流的内部还是外部)
list-style-image(将图像指定为列表项标记)
代码示例:
ul {list-style: square inside url("circle.gif");}
设置列表的颜色样式
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表
而添加到 <li> 标记的属性将影响各个列表项
d代码示例:
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>ol {background: #ff9999;padding: 20px;}ul {background: #3399ff;padding: 20px;}ol li {background: #ffe5e5;padding: 5px;margin-left: 35px;}ul li {background: #cce5ff;margin: 5px;}</style></head><body><h1>设置列表的颜色样式:</h1><ol><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ol><ul><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul></body></html>
页面显示:
七、 盒子模型
概念
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子,封装周围的HTML元素:边距、边框,填充、、实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
盒子模型说明图:
Margin(外边距)- 清除边框外的区域,外边距是透明的Border(边框)- 围绕在内边距和内容外的边框Padding(内边距)- 清除内容周围的区域,内边距是透明的Content(内容)- 盒子的内容,显示文本和图像
盒子的宽度和高度
元素实际在页面占有的总宽度计算公式:
总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
如果想要设置的宽度直接就是元素的实际宽度,通过box-sizing属性
元素的宽度和高度
height 和 width 属性可设置如下值:auto : 默认。浏览器计算高度和宽度
length : 以 px、cm 等定义高度/宽度
% :以包含块的百分比定义高度/宽度
initial : 将高度/宽度设置为默认值
inherit :从其父值继承高度/宽度
外边距margin
margin 定义外边距
可以为元素的每一侧指定外边距的属性:
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值:
auto :浏览器来计算外边距,使元素在其容器中水平居中
length :以 px、pt、cm 等单位指定外边距
% :指定以包含元素宽度的百分比计的外边距
inherit:指定应从父元素继承外边距
tips:
允许负值
代码示例:
<style>div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;}</style>
简写属性
上右下左(顺时针)margin-top、margin-right、margin-bottom、margin-left分别一次对应四个参数
代码示例:
<style>div {border: 1px solid black;margin: 25px 50px 75px 100px;/*上右下左*/background-color: lightblue;}p.p1 {margin: 25px 50px 75px;/*上,左右,下*/}p.p2 {margin: 25px 50px;/*上下,左右*/}p.p3 {margin: 25px;/*上下左右*/}</style>
外边距合并
外边距合并,即当两个垂直外边距相遇时,它们将形成一个外边距
合并后的外边距的高度等于max(高度1,高度2)
内边距Padding
用于在任何定义的边界内的元素内容周围生成空间
元素的每一侧内边距的属性:
padding-top
padding-right
padding-bottom
padding-left所有内边距属性都可以设置以下值:
length : 以 px、pt、cm 等单位指定内边距
% : 指定以包含元素宽度的百分比计的内边距
inherit :指定应从父元素继承内边距tips:
不允许负值
代码示例:
div {padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;}
简写属性
上右下左(顺时针)padding-top、padding-right、padding-bottom、padding-left分别一次对应四个参数
代码示例:
<style>div {border: 1px solid black;padding: 25px 50px 75px 100px;/*上右下左*/background-color: lightblue;}p.p1 {padding: 25px 50px 75px;/*上,左右,下*/}p.p2 {padding: 25px 50px;/*上下,左右*/}p.p3 {padding: 25px;/*上下左右*/}</style>
轮廓(区别于边框)
轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素
CSS 拥有如下轮廓属性:
outline-style
outline-color
outline-width
outline-offset
outline
tips:
轮廓与边框不同
轮廓是在元素边框之外绘制的,并且可能与其他内容重叠;轮廓不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响
轮廓样式
outline-style 属性指定轮廓的样式,并可设置如下值:
代码示例:
p.dotted {outline-style: dotted;}p.dashed {outline-style: dashed;}p.solid {outline-style: solid;}p.double {outline-style: double;}p.groove {outline-style: groove;}p.ridge {outline-style: ridge;}p.inset {outline-style: inset;}p.outset {outline-style: outset;}
轮廓宽度
outline-width 属性指定轮廓的宽度
宽度值
thin(通常为 1px)
medium(通常为 3px)
thick (通常为 5px)
特定尺寸(以 px、pt、cm、em 计)
轮廓颜色
outline-color 属性用于设置轮廓的颜色
使用 outline-color: invert可以执行颜色反转
简写属性
简写属性:outline-width
outline-style(必需)
outline-color
值的顺序无关紧要
轮廓偏移
outline-offset 在元素的轮廓与边框之间添加空间
元素及其轮廓之间的空间是透明的
代码示例:
<head><style>p {margin: 30px;border: 1px solid black;outline: 1px solid red;outline-offset: 15px;}</style></head><body><p>此段落边框边缘外 15 像素处有一条轮廓线</p></body>
页面显示: