CSS入门

Uncategorized
3k words 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//                       _oo0oo_
//                      o8888888o
//                      88" . "88
//                      (| -_- |)
//                      0\  =  /0
//                    ___/`---'\___
//                  .' \\|     |// '.
//                 / \\|||  :  |||// \
//                / _||||| -:- |||||- \
//               |   | \\\  -  /// |   |
//               | \_|  ''\---/''  |_/ |
//               \  .-\__  '-'  ___/-. /
//             ___'. .'  /--.--\  `. .'___
//          ."" '<  `.___\_<|>_/___.' >' "".
//         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
//         \  \ `_.   \_ __\ /__ _/   .-` /  /
//     =====`-.____`.___ \_____/___.-`___.-'=====
//                       `=---='
//
//
//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
//               佛祖保佑         永无BUG
//
//
//

选择器

基本选择器类型

1.标签选择器

1
2
3
h1{
    /* 标签选择器选择页面上的所有该标签 */
}

2.id选择器

1
2
3
#IDName{
    /* id选择器 */
}

3.类选择器

1
2
3
.ClassName{
    /* class选择器 */
}

样式生效遵循就近原则，距离该元素越近优先级越高

层次选择器

1.后代选择器

在某个元素的后面 

1
2
3
Father>Son{
    /* 子选择器 */
}
### 2.相邻兄弟选择器 
1
2
3
4
.ClassName+labelName{
    background-image: url("https://")
/* 相邻兄弟选择器，只会选择相邻的下一个标签 */
}

3.通用选择器

1
2
3
.ClassName+lableName{
    /* 下面的所有兄弟标签 */
}

结构伪类选择器

1
2
3
4
5
6
7
8
9
10
11
ul li:first-child{
    /* ul第一个子元素 */
}

ul li:last-child{
    /* ul最后一个子元素 */
}

p:nth-child(n){
    /* 选择当前元素父元素的第n个p标签子元素 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 
    条件：
        属性名 = 属性值（可使用正则表达式）
            =   ：绝对等于
            *=  ：包含
            ^=  ：以...开头
            $=  ：以...结尾
        a[id]：
            存在id属性的元素
        
*/
a[条件]{
    /* css代码 */
}

CSS作用以及字体样式

传递有效页面信息、美化页面吸引用户、凸显页面主题、优化用户体验 ## 字体样式

1
2
3
4
5
font-family: 字体;
font-size: 字体大小;
font--weight: 字体粗细;
font-color: 颜色;

文本样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
h1{
    color: #FF000000;
    color: rgba(0,255,255,0.5);
    text-align: 文本位置（居中）;
    text-indent: 2em(段落首行);
    background: #FFFFFFFF；
    height: 300px;
    line-height: 300px;
    /* 行高和块高一致实现居中效果 */

}
.l1{
    text-decoration:overline;
    /* 上划线 */
}
img,span{
    vertical-align:middle;
    /*  */
}
  • 颜色：color
  • 文本对齐方式：text-alian = center
  • 行高：line-height
  • 装饰：text-decoration: none 消除动画
  • 文本图片水平对齐：vertical-align:middle

伪类 & 阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a{
    /* 原本的样式 */
}
a:hover{
    /* 鼠标悬停的颜色 */
}
a:active{
    /* 鼠标按下的颜色 */
}
a:visited{
    /* 鼠标点击之后的颜色 */
}

#b{
    text-shadow: #3cc7f5 10px 10px 10px;
    /* 阴影颜色，水平偏移，垂直偏移，阴影半径 */
}

列表样式

小规范：样式一般先写外面的元素 

1
2
3
4
5
6
7
ul li{
    height:30px;
    list-style: none;
    /* 列表前面的图表（点/数字） */
    text-indent: 1em;
    /* 文字缩进 */
}

背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    /* 粗细，实线，颜色 */
    background-image: url("");
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
    /* 重复类型 */
    background: red url("xxx") 200px 10px no-repeat;
    /* 颜色，图片，位置，平铺 */
    background-position: 280px 10px;
}

渐变

渐变色便捷查询 # 盒子模型

盒子模型 

1
2
3
4
5
6
7
8
9
10
11
12
13
body{
    margin:0;
    /* 消除默认存在的外边距 */
}
#box{
    width: 300px;
    border: 1px dashed red;
    margin: 0 auto;
    /* 实现盒子内容居中 */
    border: 1px;
    padding: 0 0 0 0;
    /* 上下左右，可以简写成两个或者一个参数 */
}
## 圆角边框 &阴影 
1
2
3
4
5
6
7
8
div{
    width: 300px;
    height: 200px;
    border: 10px solid yellow;
    border-radius: 10px 0 10px 0;
    /* 圆角半径，接受4个参数 */
    box-shadow: 10px 10px 100px yellow;
}

浮动

标准文档流

块级元素：独占一行 h1~h6、 p 、 div

行内元素：不独占一行 span a img strong

标准文档流

display

  • display: block;
  • display:inline
  • disolay:inline-block

float

类似于气泡浮上水面，指定向左或者右浮动

父级边框塌陷

浮动可能会使得内部元素超出父级元素的边缘，因此使用clear让一些元素不漂浮 在父元素后面加一个空的div可以清除这种状况 

1
2
3
4
5
6
7

div{
    clear:right;    
    clear:left;
    clear:both;
    clear:none;
}

overfloat

Comments