CSS基础

摘要：语法选择器声明声明由属性属性值组成属性宽度单位高度单位背景颜色颜色的英文或者十六进制颜色字体颜色字体大小注释单行注释多行注释样式表内部样式表将语法写在标签里面，而标签写在里面。

声明由 css属性:属性值; 组成

p{background-color: #ccc;}

width 宽度(单位：px)
height 高度（单位:px）
background-color 背景颜色(颜色的英文或者十六进制颜色)
color 字体颜色
font-size 字体大小
……

 /*h3{width:300px;}*/ 单行注释
 
 /* p{
        width:300px;
        height: 300px;
    } */多行注释

1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。

    
    
    
        
        
        
       
    
    
        
内部样式表
    
    

2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件。作用域是只要链接到该css文件的所有html页面。

[注] linkrel="stylesheet"说明链接的是一个样式表文件。

test.css文件：
h3{
    width:300px;
    height:300px;
    background-color:red;
}

html文件：



    
    
    


    
外部样式表

3.内联样式表（行内）：将style作为html属性，将声明（css属性:css属性值;）作为html属性值。作用域是当前元素

    
    


    
内联样式表

前提：出现层叠性（对同一个元素添加相同的css属性）问题的时候，才会有优先级的比较。

优先级：内联样式>内部样式,内联样式>外部样式。内部样式与外部样式，誰写在后面，就覆盖前面的相同元素的相同属性。

1.标签选择器，通过标签名获取元素(相当于人的姓名)

    div{
        width:200px;
        height:200px;
        background-color:#666;
    }

2.类选择器，通过.类名获取元素(相当于人的外号)

.box{
    width:200px;
    height:200px;
    background-color:#666;
}

3.id选择器，通过#id名获取元素(相当于人的身份证号码，元素的id有且只有一个)

#box{
    width:200px;
    height:200px;
    background-color: #666;
}

[注]类和id选择器的命名规则：英文开头，包含数字、下划线

    
类选择器和id选择器
    
id选择器

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器

    
    
    


    
选择器优先级

1.字体大小 font-size,单位为px、rem、pt等。

浏览器默认字体大小为16px,最小字体为12px。(9pt=12px,12pt=16px)

p{font-size:24px;}

2.字体加粗 font-weight,属性值为：bolder更加粗 bold加粗600-900 normal默认正常100-500。

p{font-weight:bold;}

3.字体倾斜 font-style,属性值为：normal默认正常 italic倾斜 oblique更倾斜

p{font-style:oblique;}

4.字体家族 font-family

该属性的属性值若为中文字体或多个单词组成，则需要加上双引号。若存在多个字体，则用逗号隔开。表示找不到前一个字体时，就用后面的。

p{font-family:"Times New Roman","楷体","宋体";}

5.字体颜色 color，属性值为：颜色的单词或者十六进制

十六进制：0-9 a b c d e f;

表示颜色:#000000,前两个0代表红色，中间两个0代表绿色，后两个0代表蓝色.若是所有表示同一颜色的两个数是一样的，则可以省略成三个数字。

div{color:yellow;}
p{color:#ccc;}
span{color:#ff0000;}//红色，可简写为:#f00;
a{color:#00ff00;}//绿色，可简写为:#0f0;
i{color:#0000ff;}//蓝色，可简写为:#00f;

1.文本设置大小写 text-transform，属性值为：lowercase小写 uppercase大写 capitalize首字母大写 none默认不变换。

p{text-transform: none;}

2.文本修饰 text-decoration，属性值为：underline下划线 overline上划线 line-through删除线 none默认没有修饰 blink闪烁

p{text-decoration:blink;}

3.首行缩进 text-indent,单位:em,以当前字体的大小为基准(可以为负值)

p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行缩进2个文字

4.字间距 letter-spacing

p{letter-spacing:30px}

5.词间距 word-spacing(以空格作为标识符)

p{word-spacing: 30px}

6.文本在当前容器中的水平对齐方式 text-align，属性值为：left默认向左 right向右对齐 center居中对齐 justify调整,对英文有效果。

p{
    width: 200px;
    height: 200px;
    font-size:18px;
    text-align:center;
}

7.文本在垂直方向的对齐方式(行内元素):vertical-align,属性值为：baseline默认以基线对齐 middle中线 top顶线 bottom底线。

a{
    font-size:24px;
    vertical-align:middle;
}
span{
    vertical-align:middle;
}
img{
    vertical-align:middle;
}

1.列表样式类 list-style-type,属性值为：disc默认实心圆 circle空心圆 square方块 none没有。

2.列表样式图片 list-style-image:url(路径)

3.列表样式的位置 list-style-position,属性值为：outside列表项外边（默认） inside列表项里边。

ul,li{
    list-style-type: none;//常用
    list-style-image: url("../images/arror.jpg");
    list-style-position: inside;
    
}
//关于li前面的小图标，一般会给li留个padding的位置，再给li加上背景图片，而且要no-repeat，background-position一般都是0 center

1.边框宽度 border-width

2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线

3.边框颜色 border-color

div{
    width: 200px;
    height: 200px;
    border-width:3px;
    border-style: double;
    border-color:red;
    
}

4.改变某条边框的属性值,border-方向left、right、top、bottom）

border-left:2px dashed red;

5.改变某条边框的某个属性的属性值,border-方向-属性(width、style、color)

border-right-style:dotted;

属性值为:normal(默认) 具体像素值或者数值(eg:44px/2) 百分比(%,基于当前字体尺寸的百分比行间距。) inherit(从父元素继承 line-height 属性的值。)

p{
    width:100px;
    height:30px;
    font-size:18px;
    text-align:center;
    line-height:30px;
}
//常用的文本水平和垂直方向都居中：text-align:center;line-height:numpx;line-height的值与元素的高度一致。

1.背景颜色background-color

2.背景图片background-image:url()

3.背景图片重复background-repeat （repeat默认重复 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复）

4.背景图片在容器中的位置 background-position:水平方向 垂直方向;属性值可以为数值、方位（leftcenterright、topcenterbottom）。

5.背景图片的固定 background-attachment,属性值为：scroll默认滚动 fixed固定。

div{
    width: 800px;
    height: 800px;
    border:10px solid #ccc;
    /*background-color:#ffffd;*/
    background-image:url("../images/666.jpg");
    background-repeat:repeat-y;
    background-position:center center;
    
    background-attachment: fixed;
}

属性值为：left向左浮动 right向右浮动 none不浮动

在标准的文档流中，页面布局必须遵循从左往右，从上往下

1.浮动后的元素会脱离标准流,但是里面的内容不会脱离文档流。

2.浮动后的元素相当于行内块级元素（一行显示多个、可以设置宽高）

3.若是一行放不下所有的浮动元素，则放不下的那个浮动元素会在它上一个元素的最低点开始摆放。

属性值为0-1之间的小数，数值越大越不透明

div{
    width:100%;
    height:100%;
    background:#999;
    opacity:0.2;
}