CSS
-
只是使用HTML标签和其属性来展示数据存在什么问题?
- 1、样式比较单一;
- 2、不同的标签不同的属性控制不同的样式，难以记忆，没有提供统一的样式控制方式;
- 3、样式不能与标签解耦，不能将样式进行重复使用;
-
Cascading Style Sheets
-
层叠样式表
- 多重样式层叠为一
- 提供多种样式控制方式，并且可以作用于同一个页面元素(标签)。
- 多重样式层叠为一
-
CSS与HTML的结合方式
- 外部样式
- 将css样式编写在以.css结尾的文件中
- 在
<head></head>标签内部使用<link></link>标签，其href属性指定要引入的css文件路径，rel属性取值为”stylesheet” - 如:
<link href="../../css/demo.css" rel="stylesheet"/>
- 内部样式
- 在
<head></head>标签内部使用<style></style>标签设置CSS样式 - 如:
<style>h1{color:red;}</style>
- 在
- 内联样式
- 在目标标签上使用style属性设置CSS样式
- 如:
<h1 style="color:red;">这是一个目标文字</h1>
- 区别:
- 作用范围:
- 外部样式 > 内部样式 > 内联样式
- 优先级:
- 内联 > 内部或外部样式(就近原则) > 默认样式
- 作用范围:
- 外部样式
-
选择器
- 筛选符合指定规则的元素
- 基本选择器
- 元素选择器
- 选择具有指定标签名的元素
- 格式:
- 标签名{属性名:属性值;….}
- h1{color: red;}
- 类选择器(class选择器)
- 一个页面可以有多个元素具有相同的class属性值
- 选择具有指定class属性值的元素
- 格式:
- .class属性值{属性名:属性值;….}
- .demo{color:red;}
- ID选择器
- 同一个页面要保证元素的id属性值唯一，通过id属性值可以唯一定位一个页面元素。
- 选择具有指定id属性值的元素
- 格式:
- #id属性值{属性名:属性值;….}
- #demo2{color:blue;}
- 优先级:
- ID选择器 > 类选择器 > 元素选择器
- 元素选择器
- 扩展选择器
- 所有元素选择器
- 选择当前页面所有元素
- 格式:
- *{属性名:属性值;….}
- *{color:#FF8C00;}
- 并集选择器
- 选择多个指定选择的元素结果求并集
- 格式:
- 选择器1,选择器2,….{属性名:属性值;….}
- .demo,#iddemo{color: aqua;}
- i,b{color: aqua;}
- 后代选择器(子子孙孙)
- 选择选择器1下的符合选择器2的所有元素(子子孙孙)
- 格式:
- 选择器1 选择器2 ……{属性名:属性值;….}
- font b{color: chartreuse;}
- 子选择器
- 选择选择器1下符合选择器2的子元素
- 格式:
- 选择器1>选择器2{属性名:属性值;….}
- font>i{color:red;}
- 伪类选择器
- 选择元素具有一个的状态
- 如:
- 状态:
- link:初始的状态
- hover:悬浮的状态
- active:正在访问的状态
- visited:访问过后的状态
- 普通元素一般选择其hover状态
- 格式:
- 选择器:状态{属性名:属性值;….}
- a:link{color: yellow;}
- #img1:hover{width: 300px;}
- 可以使用!important提升优先级
- 所有元素选择器
-
块标签
-
圈范围、划区域
-
<span></span>- 一般用于划分文本区域，不换行
-
<div></div>- 默认情况下，独占一行
-
-
CSS常用属性
- 文本、字体
- font-family
- 规定文本的字体系列。
- font-size
- 规定文本的字体尺寸。
- font-weight
- 规定字体的粗细。
- 100~900，默认400
- color
- 设置文本的颜色。
- line-height
- 设置行高。
- text-align
- 规定文本的水平对齐方式。
- text-decoration
- 规定添加到文本的装饰效果。
- text-decoration:none;可以去掉超链接的下划线
- font-family
- 背景
- background-color
- 设置元素的背景颜色。
- rgba(red,green,blue,透明度);
- background-image
- 设置元素的背景图像。
- background-repeat
- 设置是否及如何重复背景图像。
- 取值
- repeat 默认。背景图像将在垂直方向和水平方向重复。
- repeat-x 背景图像将在水平方向重复。
- repeat-y 背景图像将在垂直方向重复。
- no-repeat 背景图像将仅显示一次。
- background-color
- 边框
- border-style
- 设置四条边框的样式。
- border-width
- 设置四条边框的宽度。
- border-color
- 设置四条边框的颜色。
- border
- 简写属性在一个声明设置所有的边框属性。
- border-radius
- 设置4个角的弧度半径
- border-style
- 颜色
- opacity
- 规定元素的不透明级别。
- 取值:0~1
- 当前元素整个受影响，包含其内容；
- opacity
- 盒模型
- 尺寸
- width
- 设置元素的宽度。
- height
- 设置元素高度。
- width
- 外边距
- margin 在一个声明中设置所有外边距属性。
- 设置左右取值为auto，可实现当前容器(盒子)放在父容器的水平正中央;
- margin:值1;
- 上下左右都为值1;
- margin:值1 值2;
- 上下为值1，左右为值2；
- margin:值1 值2 值3;
- 上为值1，左右为值2，下为值3；
- margin:值1 值2 值3 值4;
- 上为值1，右为值2，下为值3，左为值4；
- margin-bottom 设置元素的下外边距。
- margin-left 设置元素的左外边距。
- margin-right 设置元素的右外边距。
- margin-top 设置元素的上外边距。
- 练习:实现大盒子嵌套小盒子，让小盒子出现在大盒子的水平垂直正中央，且，小盒子的文字内容出现在小盒子的水平垂直正中央；
- margin 在一个声明中设置所有外边距属性。
- 内边距
- padding 在一个声明中设置所有内边距属性。
- padding:值1;
- 上下左右都为值1;
- padding:值1 值2;
- 上下为值1，左右为值2；
- padding:值1 值2 值3;
- 上为值1，左右为值2，下为值3；
- padding:值1 值2 值3 值4;
- 上为值1，右为值2，下为值3，左为值4；
- padding:值1;
- padding-bottom 设置元素的下内边距。
- padding-left 设置元素的左内边距。
- padding-right 设置元素的右内边距。
- padding-top 设置元素的上内边距。
- padding 在一个声明中设置所有内边距属性。
- box-sizing:border-box;
- 当前容器的尺寸以当前容器的width与height值为准。
- 文档流
- 默认页面元素的布局方式。
- 页面元素的排版布局，遵循从上到下，从左到右的流式布局方式。
- 脱离文档流
- 将元素从正常文档流中拿走，其它正常文档流中元素定位会忽略脱离文档流的元素进行定位。
- 浮动
- float
- 浮动后的元素会脱离文档流。
- 取值:
- left
- right
- none
- 应用场景:
- 1、让多个DIV在同一行显示；
- 2、文字环绕效果;
- 定位
- position
- 规定元素的定位类型。
- 绝对定位会脱离文档流。
- 取值:
- absolute
- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- fixed
- 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- relative
- 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
- static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- absolute
- position
- 尺寸
- 文本、字体
扫一扫
1031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
