前端之CSS样式
- css介绍
- css是为html标签设置样式的
- css由选择器和声明组成
- 声明包括属性和属性值
- 声明之间用分号；隔开
- css注释
- /注释类容/
- css的几种引入方式
- 行内样式 不推荐使用
- 直接在html标签中style属性中设置样式，不推荐使用，不方便后续更改
-
<p style="color: red">Hello world.</p>
- 内部样式
- 嵌入式是将css样式集中写在网页标签标签对中
-
<head> <meta charset="UTF-8"> <title>Title</title> <style> p {color: #0000cc} </style> </head>
- 外部样式 推荐使用
- 就是将css样式单独写在一个文件中，然后通过页面引入即可，推荐使用
- 引入方法
-
head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="路径"> </head>
- 行内样式 不推荐使用
- css选择器
- 基本选择器
- id选择器 #d1 {color: red} id为d1的颜色为red
- 标签选择器 div {color: red} 标签是div的颜色为red
- 类选择器 .c1 {color: red} class为c1的颜色为red
- 通用选择器 * {color：red} 所有标签颜色都为red，不推荐使用
- 组合选择器
- 后代选择器 div p {color: red}div标签内的p标签颜色为red
- 儿子选择器 div>p {color: red}div标签的子级p标签颜色为red
- 毗邻选择器 div+p div标签同级标签的下面p标签
- 弟弟选择器 div~p div标签同级标签下的所有p标签
- 属性选择器
- 根据标签中属性样式 div[title]
- div.p1 div且class为p1的标签
- 根据标签中属性的具体值给定样式 div[title="hello"]
- 根据标签中属性样式 div[title]
- 分组和嵌套
- 为多个标签给定相同的样式 div,p {color: red} 标签与标签之间用逗号隔开
- 基本选择器之间可以任意嵌套组合使用
- 不常用的选择器
-
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }
-
- 伪类选择器
- link 未访问的链接，
-
a:link { color: #FF0000 }
-
- visited 已访问的链接
-
a:visited { color: #00FF00 }
-
- hover 鼠标移动到链接上才改变样式
-
a:hover { color: #FF00FF }
-
- active 选的链接改变样式
-
a:active { color: #0000FF }
-
- input 输入框获取焦点时样式
-
input:focus { outline: none; background-color: #eee; }
-
- link 未访问的链接，
- 伪元素选择器
- first-letter 常用的给首字母设置特殊样式
-
p:first-letter { font-size: 48px; color: red; }
-
- before 在内容前插入内容，该内容不可被选定
-
p:before {content: "*"; color:red}
-
- after 在内容尾插入内容，
-
p:after {content: "#"; color:red}
-
- 注意:before 和after多用于清除浮动
- first-letter 常用的给首字母设置特殊样式
- 选择器优先级
- 当选择器相同时，谁最后加载听谁的；
- 选择器不同时，
- 特殊情况下使用 !important 意思是不论优先级，必加载 不推荐使用
-
p {color: yellow!important;}
-
- 基本选择器
- css相关属性
- width 属性可以为元素设置宽度（块级标签才能设置宽度，而内联标签是由内容决定的）
- height 属性设置高度
- 设置字体的属性
- font-family 可以把多个字体名称作为一个回退系统
-
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } /*当系统不支持第一个，就会显示第二个字体，依次，都没有则显示系统默认字体*/
-
- font-size 字体大小
- font-weight 字的粗细
- font-family 可以把多个字体名称作为一个回退系统
- 文本属性
- color 颜色
- 直接输入颜色名
- 十六进制 #fffff红蓝绿
- rgb格式 rgb（255，255，255）
- text-align 对齐方式 属性值
- left 左边对齐 默认
- center 居中
- jusify 俩端对齐
- right 右边对齐
- text-decoration 属性用来给文字添加特殊效果
- none 默认。定义标准的文本
- overline 定义文本上一条线
- line-through 定义穿过文本的一条线
- linherit 继承父元素的text-decoration属性
- 常用：去掉a超链接中的默认的下划线
-
a {text-decoration: none;}
-
- 文本首行缩进
- text-indent
- color 颜色
- 背景属性 background
- 背景颜色 background-color
- 背景图片 background-image: url()
- 背景重复 background-repeat
- no-repeat 不重复
- repeat-x x轴重复
- repeat-y y轴重复
- repeat 默认重复
- background-position 背景位置
-
background-position: right bottom; background-position: 200px 200px;
-
- 背景属性可以简写：
-
background:#ffffff url('1.png') no-repeat right top;
-
- 背景固定 backgound-attachment
- fixed 固定
- 边框 border 颜色，宽度，虚实，
- border-style 风格
- solid 实线
- dashed 虚线
- double 双实线
- none 无边框
- dotted 点状虚线
- 通常宽度 ，风格，颜色，简写在一起
-
.c2 {border: 2px solid red;}
-
- border-radius 实现画圆,可以调节其度数，
-
border-radius: 50%;
-
- border-style 风格
- display 属性 用来控制html元素的显示效果的
- none 元素存在，但是不在浏览器显示，且不占空间
- display中的none和visibility中的hidden区别
- none，隐藏且不占空间
- hidden ，隐藏但是占位置，
- display中的none和visibility中的hidden区别
- inline 行内元素，运用将块级元素的块特点取消
- block 将内联元素变为块级元素
- inline-block 使元素同时具有行内元素和块级元素的特点
- none 元素存在，但是不在浏览器显示，且不占空间
- css盒子模型
- 有图
- margin（外边距） 用于控制元素与元素之间的距离，最基本的就是控制元素和空间之间的间隔，从视觉角度达到相互隔开的目的
-
margin: 0 auto; /*顺序为顺时针设置，上右下左，auto为系统自动调节，*/ padding：5px 10px 15px 20px-
提供一个，用于四边；
-
提供两个，第一个用于上－下，第二个用于左－右；
-
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
-
提供四个参数值，将按上－右－下－左的顺序作用于四边；
-
-
- border(边框) 围绕在内边距和内容外的边距
- padding（内填充） 用于控制文本内容和边框之间的距离
- Content（内容） 盒子的内容，显示文本和图像
- 有图
- 浮动float
- 特点：浮动元素会生成一个块级块，本身不属于何种元素
- 浮动的框可以向左向右移动，直到碰到边缘或碰到包含框或另一个浮动框的边框
- 由于浮动框处于z轴上，它在页面上的空间可以被其他元素所占
- 取值：
- left，right，none是默认值，不浮动
- 解决浮动的副作用使用clear
- 让其页面位置不能被其他元素占用
- 取值
- left 左边不能浮动
- right 右边不能浮动
- both 俩边都不能浮动
- 解决实例
- 不推荐使用
- 可以用在浮动元素，之后的元素类添加属性clear：both使其不占用浮动元素的页面空间
- 也可以在后续元素前增加一个标签，标签中放clear：both，使其不占用浮动元素的页面空间
- 推荐使用
- 在祖先类（不能是body）元素中
-
.clearfix:after { content: ''; display: block; clear:both }
-
- 在祖先类（不能是body）元素中
- 不推荐使用
- 特点：浮动元素会生成一个块级块，本身不属于何种元素
- overflow 溢出属性
- hidden 内容会被修剪，且其余内容不可见
- scroll 内容被修剪 ，但是浏览器会滚动以便显示其余内容
- atuo 内容被修剪，浏览器自行处理
- 定位 position
- 对属性位置进行移动
- relative 相对定位，相对于原来的位置进行移动
- abslute 绝对定位 ，根据自己祖先的元素进行定位
- fixed 固定，对象脱离页面，固定死位置，不会随着滚动而变化
- z-index 设置z轴方向的层叠顺序
- z-index：999
- opacity 透明度
- background-color: rgba(0,0,0,0.3) 设置背景颜色的透明度
- opacity: 0.3 设置所有的透明度
- 对于元素的取值为0~1之间，0为完全透明，1为完全不透明
