前端css

一、CSS的引入方式

        1、行内样式

        在标记的style的属性中设定CSS样式，不推荐大规模使用

         

       

 

        2、内部样式

        嵌入式是将CSS样式集中写在网页的标签中的中

       

 

        
        

       

        3、外部样式

外部样式就将css写在单独的文件中，然后在页面进行引入即可

二、CSS选择器

        1、元素选择器

        p{color："red"；}

        2、id选择器

        #i1{

        background-color：red；

}

        3、类选择器

        .c1{

        font-size：16px；

}

p.c1{

        color：red；

}

注意事项：样式类名不要用数字开头(有的浏览器不认)，标签中的class属性如果有多个，要用空格分隔

        4、通用选择器

        *{

        color：white；

}

        5、组合选择器

                1. 后代选择器

                li内部的a标签设置字体颜色

                li a{

                        color：green；

}

                2. 儿子选择器

                选择所有父级是

元素的

元素

                div>p{

                        font-family: "Arial Black", arial-black, cursive;

}

                3. 毗邻选择器

                /*选择所有紧接着

元素之后的

元素*/
                div+p {
                          margin: 5px;
                }

                4. 弟弟选择器

                /*i1后面所有的兄弟p标签*/
                #i1~p {
                          border: 2px solid royalblue;
                }

        6、属性选择器

        用于选取带有指定属性的元素

        p[title]{

        color：red；

}

         用于选取带有指定属性和值得元素

        p[title="213"] {

                color：green；

}

        7、伪类选择器

1、未访问的链接

a：link{

        color：red；

}

        

2、鼠标放到连接上

 a：hover{

        color：green；

}

3、鼠标按住链接不动

a：active{

        color：blue

}

4、已经访问的链接

a：visited{

        color：yellow；

}

5、input输入框获取焦点时的样式

 input：focus{

        outline：none；

        background-color：black；

}

        8、伪元素选择器

        1、frist-letter：常用于给首字母设置特殊样式

p：first-letter{

        font-size：15px；

        color：red；

}

        2、before：在每个元素之前

元素之前插入内容

p：before{

        content："*"

        color：red；

}

        3、after：在每个

元素之后插入内容

p：after{

        content："[?]"；

        color：blue；

}        

        

 before和after多用于清除浮动

三、分组和嵌套

        分组选择器使用逗号隔开，所有的选择器都是并列的

        组合（嵌套）选择器使用的是空格隔开，选择器不是并列的，最终生效的是最后一个选择器

四、选择器的优先级

        选择器的优先级高低

1、在选择器相同的情况下：

                就近原则，哪个近就用哪个

2、在选择器不同的情况下：

                行内选择器 》 id选择器 》类选择器 》标签选择器

五、CSS属性

        1、宽和高

        width：设置元素的宽度

        height：设置元素的高度

注意：块儿级标签才能设置宽度，内联标签的宽度由内容来决定

        2、字体属性

1、font-family：设置字体

2、font-size：设置字体大小

3、font-weight：设置字体的粗细

属性：

        1. normal：默认值标准粗细

        2. bold：粗体

        3. bolder：更粗

        4. lighter：更细

        5. 100~900：设置具体的粗细，400等于normal，700等于bold

        6. inherit：继承父类字体的粗细值

4、文本颜色：设置文字的颜色，经常通过CSS指定

        1. 十六进制-如：#FF0000

        2. RGB值-如：RGB(255,0,0)

        3. 颜色的名称-如：red

        4.rgba（255,0,0,0.3）第四个值为alpha，指定色彩的透明度，范围0.0~1.0之间     

        3、 文字属性

        文字对齐

1、text-align：属性规定元素中的文本的水平对齐方式

        

属性值：

        1. left：左边对齐，默认值

        2. right：右对齐

        3. center：居中对齐

        4. justify：两端对齐

        文字装饰

text-decoration：属性用来给文字添加特殊效果

属性值：

        1. none：默认。定义标准的文本---------常用来去除a标签默认的自划线

        2. underline：定义文本下的一条线

        3. overline：定义文本下的一条线

        4. line-through：定义穿过文本下的一条线        

        5. inherit：继承父元素text-decoration属性的值

        首行缩进

        text-intend：12px；

        4、背景属性

1、背景颜色：background-color：red；

2、背景图片：background-img：url（"1.jpg"）

3、背景重复：

        background-repeat：no-repeat

        1. repeat（默认）：背景图片平铺排满整个网页

        2. repeat-x：背景图片只在水平方向上平铺

        3. repeat-y：背景图片只在垂直方向上平铺

        4. no-repeat：背景图片不平铺

4、背景位置：

        background-position：left top；

5、支持简写：

        background：red url("1.jpg") no-repeat left top；

        5、边框

边框属性：

        border-width

        border-style

        border-color

简写方式：border：20px solid red；

边框样式(border-style)的属性值：

        1. none：无边框

        2. dotted：点状虚线边框

        3. dashed：矩形虚线边框

        4. solid：实线边框

除了可以同一设置边框外，还可以单独为某一个边框设置样式：

        border-left-style：solid

        border-bottom-style：dotted

        border-top-style：solid

        border-right-style：none

        border-top-color：red

        border-radius

border-radius：这个属性能实现圆角边框的效果

        将border-radius设置为长或高的一半即可得到一个圆形

        6、display属性

display属性值：

        1. display："none"：html文档中元素存在，但是在浏览器中不显示，一般配合js使用

        2. display："block"：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分

        3. display："inline"：按行内元素显示，此时在设置元素的width，height，margin-top、margin-bottom和float属性都不会有什么影响

         4. display："inline-block"：使元素同时具有行内元素和块儿级元素的特点

        display："none"和visibility：hidden的区别

        visibility：hidden：可以隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但仍然会影响布局

        display：none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失

六、盒子模型

盒子模型：

        1. margin：外边距。用于控制元素与元素之间的距离，margin的最基本的用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

        2. padding：内边距。用于控制内容与边框之间的距离

        3. border：边框。围绕在内边距和内容外的边框

        4. Cotent：盒子的内容，显示文本和图像

        margin外边距

属性：

        margin-top：2px；

        margin-bottom：2px；

        margin-left：2px；

        margin-right：2px；

简写：

        margin：2px 2px 2px 2px； 

常见居中：

        margin：0，auto；

padding内边距

padding-top：2px；

padding-bottom:2px;

padding-right:4px;

padding-left:2px; 

  

使用简写：

        padding：2px 2px 4px 2px；

padding常用的简写方式：顺序

        

简写时写一个：4边都填充

简写时写两个：第一个值用于上下，第二个值用于左右

简写时写三个：第一个值用于上，第二个值用于左右，第三个值用于下

简写时写四个：顺序是上-----右-----下-----左

float

在CSS中任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

        1. 浮动的1框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

        2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就想浮动框不存在一样。

float3中取值：

        left：向左浮动

        right：向右浮动

        none：默认值，不浮动

clear

clear属性规定元素的哪一侧不允许其它浮动元素

属性值：

        left：在左侧不允许浮动元素

        right：在右侧不允许浮动元素

        both：在左右两侧均不允许浮动元素

        none：默认值。允许浮动元素出现在两侧

        inherit：规定应该从父元素继承clear属性的值

注意：clear属性只会对自身起作用，而不会影响其他元素

清除浮动

浮动的副作用（父标签塌陷问题）

清除浮动的三种方式：

        1、固定高度

        2、伪元素清除法

        3、overflow：hidden

伪元素清除法：        

        .clearfix:after{

                content：""；

                display：block；

                clear：both；

}

七、overflow溢出属性

属性值	解释
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且取余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条一般查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条仪表查看其余的内容

overflow：水平和垂直句设置

overflow-x：设置水平方向

overflow-y：设置垂直方向

八、定位（position）

1、静态定位（static）：默认情况下，所有的标签都是静止的，不能够移动

2、相对定位（relative）：相对自己原来的位置进行移动

 

3、相对于是父标签移动的，如果没有父元素，那就按照body移动

 

4、固定定位（fixed）：相对于浏览器窗口定位