标签：大小   去掉   lock   top   contain   class   背景图片   解决   loaded   

CSS（是什么，怎么用，重点：选择器，美化网页，盒子模型，浮动，定位）

什么是css

cascading style sheet 层叠样式表

表现：表现（美化网页）

怎么用

    

    

    



我是标题

      把样式卸载样式表里

优势：CSS和代码分离。网页结构统一，可以复用。样式十分丰富，利用SEO，容易被搜索引擎收录

方式

我是标题
     行内标签加入style     行内 优先级最高
                                            head 加style标签 如上    内部
                                            用link链接             外部   

选择器

1. 标签选择器

2. 类选择器

3. id 选择器

    
我是标题

我是标题
       类选择器

id选择器

#+id     全局唯一

id选择器>类选择器>标签选择器

层次选择器

body h1{
            
        }       后代选择器

 body>h1{
            
        }       子选择器

.wobushi +h1{
            
        }       相邻兄弟选择器  向下边。

        .wobushi~h1{
            
        }       通用兄弟选择器   向下全部 包括自己

伪类选择器

ul li:first-child{
        
    }                            选中标签第一个

 h1:nth-child(2){
            
        }                                    选中第二个h1标签   如果前边有其他标签，会被阻碍，按顺序

h1:nth-of-type(2){
            
        }                                        直接在父类中查找h1的第二个元素，按类型

p:hover{
        color: aqua;
    }                             鼠标移上去会有颜色变化

属性选择器

p[]{
            
        }    []中可以只填属性，也可以填具体属性和名称

以什么开头用^ 以什么结尾用$

美化网页因素

span：重点要突出的字用span套起来

字体样式：font-family: ;设置书法字体

font-weight: ;粗细
text-indent: 2em;  首行缩进两个字
line-height: 50px; 行高大小
text-decoration:      设置字体上中下线
vertical-align：middle   文本图片水平对齐
text-shadow：            文字阴影

在li标签中

list_style:     可以设置前边小点点   none表示去掉

背景图片

background-image：url(" ")     默认平铺满
background-repeat：repeat-x     水平平铺
background-repeat：repeat-y    水平平铺
background-repeat：none-repeat   不平铺
background ：red url("") 270px 10px no-repeat   颜色，图片，位置，平铺方式

盒子模型

margin：外边距

padding：内边距

border：边框 粗细，样式，颜色

border-radius： 圆角边框

浮动

块级元素，独占一行

div h1~h6 p div  列表

行内元素

span a img strong

块级元素可以包括行内元素

display

block 块   
line 行
line-block 既是块，又是行

float

左右浮动，常用
可以用clear清除
clear: right 右侧不能有浮动
clear：left 左侧不能有浮动
clear：both 两侧都不能浮动
?
解决浮动塌陷问题
1.把父级块设置的大一些    基本不用
2.设置一个div     {
                    clear：both
                    margin：0
                    padding：0
}  
3.在父级元素加入overflow      设置滚动条
4.父类添加一个伪类 #father：after{
content："";
display:block;
clear:both;
?
}推荐使用

定位

相对定位

position：relative；
top：
left：
bottom：
right：              距离哪边多少px

绝对定位

如果父级元素没有设置，则相对于浏览器定位

在父级元素内定为，

固定定位

直接定死 不会随着滚动条移动而动

z-index

默认是0，最高无限制

CSS有关

标签：大小   去掉   lock   top   contain   class   背景图片   解决   loaded   

原文地址：https://www.cnblogs.com/ltdh/p/12434557.html