标签：变量   style   权重   选择   垂直居中   ant   ora   16进制   居中   

1 css语法

选择器 {属性1：值1;
              属性2：值2
               ...;}

例如：
.c1 {width:500px;
    height:100px;
    background-color:#F00;}

2 css导入样式

代码块
1. 行内样式-->把css样式写到标签的style属性里
2. style标签中定义
3. 写在单独的css文件中，通过link标签导入
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />

3 css选择器

3-1 基本选择器

代码块
1. ID选择器      --> HTML标签都有唯一的ID
2. 类选择器      --> HTML标签可以设置class属性
3. 标签选择器    --> p,div,h1等等还有其它标签定义样式，对大范围使用
4. 通用选择器 *

3-2 组合选择器

代码块
1. div p    后代选择器（对后代所有div后面的p都生效）
2. div>p    儿子选择器（只对后代所有div后面的一层p生效）
3. div+p    毗邻选择器（对div同级的后面的p生效）
4. div~p    弟弟选择器 （对div同级的后面的p生效）
3和4有什么区别呢？

3-3 分组和嵌套

代码块
分组：（对分组的标签都生效，标签之间用逗号隔开）
div,p{
    color:#F00;}

嵌套：div.p

3-4 属性选择器

代码块
1. div[s14]              找到有s14这个属性的div标签
2. input[type='email']   找到type是email的input标签
<form>
邮箱：<input type="email" value="请输入邮箱"></input>
</form>

input[type="email"]{
    color:#F00;
    background-color:#CCC;}

3-5 伪类选择器

代码块
1. :hover     --> 鼠标移动到标签上时应用的样式
2. :focus     --> input标签获取焦点时应用的样式

3-6 伪元素选择器

代码块
p:before {    --> 在P标签内部的最前面追加一个内容
                    content: "*";
                    color: red;
                }
                p:after {     --> 在P标签内部的最后面追加一个内容
                    
                }
                清除浮动：
                .clearfix:after{
                    content: "";
                    clear: both;
                    display: block;
                }
        

4 CSS选择器的优先级

代码块
1. 样式名一样的话
                类似 变量覆盖 最后加载的那个样式生效
2. 样式名不一样
                根据 权重计算
                内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
3. 不讲道理的，强制
                !important

5 css属性

5-1 文字相关的属性

代码块
1. font-family: "字体1", "字体2", 
                2. font-size        字体大小
                3. font-weight      字体粗细
                4. color            字体颜色
                    1. 英文的颜色名    red
                    2. 16进制颜色代码  #FF0000
                    3. RGB             rgb(255, 0, 0)
                    4. rgba(255, 0, 0, 0.4) 0.4指的是不透明度

5-2 宽度和高度

代码块
1. width             宽
2. height            高
                    只有块儿级标签设置宽和高才有效 

5-3 背景background

background-color: red
background-image: url(...)

5-4 文本样式

代码块
1. 水平居中
                    text-align: center
                2. 单行文本的垂直居中
                    line-height=父标签的高度
                3. 文本装饰线
                    text-decoration: none/under-line/over-line/line-through

5-5css的盒子模型

内容-->padding-->border-->margin

5-6 浮动

float: left/right
浮动的副作用：需要在自己后面清除浮动

5-7 定位

代码块
2. 绝对定位     --> 相对自己已经定位过的祖先标签
3. 固定定位     --> 相对于屏幕做定位

5-7 溢出

            overflow: hidden/scroll/auto

5-8 边框

            border: 1px solid red;
            border-radius: 50%

5-9 display

            1. block
            2. inline
            3. inline-block
            4. none

css基础汇总

标签：变量   style   权重   选择   垂直居中   ant   ora   16进制   居中   

原文地址：https://www.cnblogs.com/hellosiyu/p/12489918.html