[js]01css基础-CSDN博客

本文链接：https://blog.csdn.net/iiiiher/article/details/77646425

选择器
冲突权重计算
盒模型

css选择器

基础选择器

1,标签选择器

a{
    /*去掉下划线：*/
    text-decoration: none; 
}

2,类

.teshu{
    color: red;
}


<h3>我是一个h3啊</h3>
<h3 class="teshu">我是一个h3啊</h3>
<h3>我是一个h3啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>

<h3 class="teshu  zhongyao">我是一个h3啊</h3>

公共类: 便于使用

<style type="text/css">
    .lv{
        color:green;
    }
    .da{
        font-size: 60px;
    }
    .xian{
        text-decoration: underline;
    }
</style>

3,id选择器

#lj1{
    font-size: 60px;
    font-weight: bold;
    color:black;
}

注:
特点:

id区分大小写,且以字母开头
id不能重复

使用:

尽可能的用class，除非极特殊的情况可以用id。
原因:
- 1,js要通过id属性得到标签;
- 2,我们会认为一个有id的元素，有动态效果;

高级选择器

1,后代选择器
- 后台不一定是儿子,所有.div1“中的”p，就是后代p.
- div下所有的p

<style type="text/css">
    .div1 p{
        color:red;
    }
</style>

.div1 .li2 p{
    color:red;
}

后台:描述的是一种祖先结构

2,交集选择器

h3.special{
    color:red;3 }

条件:选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。

有没有空格
div.red{}
和
div .red{}
不是一个意思。

3,并集选择器
同时选2个元素,如tag.

h1,li,p{  

}


<head>
    <meta charset="UTF-8">
    <title>bingji</title>
    <style>
        p,a{
            color: yellow;
        }
    </style>
</head>
<body>
    <p>a p</p>
    <a href="">a link</a>
</body>

4.通配符选择器

*{
    color:red;3 }

特点: 效率不高一般不用.

小结:

● 字体加粗，倾斜，下划线：

font-weight:bold;
font-style:italic;
text-decoration:underline;

● 背景颜色、前景色：

background-color:red;
color:red;

● class和id的区别
class用于css的，id用于js的。
1）class页面上可以重复。id页面上唯一，不能重复。
2）一个标签可以有多个class，用空格隔开。但是id只能有id。

● 选择器
说IE6层面兼容的：标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。

p
#box
.spec
div p
div.spec
div,p7  *

权重问题

按照公式规则计算

1）继承性。有一些属性给祖先元素，所有的后代元素都集成上了。
哪些属性能继承：color、font-、text-、line-
2）层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制：
■ 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
■ 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

案例1:

案例2:

案例3:

案例4:

谁写后面谁优先

!important标记

来给一个属性提高权重。这个属性的权重就是无穷大。

font-size:60px !important;

权重小结

css盒模型

理解真实占有的宽度:

.box1{
    width: 100px;
    height: 100px;
    padding: 100px;
    border: 1px solid red;
}

.box2{
    width: 250px;
    height: 250px;
    padding: 25px;
    border:1px solid red;
}

padding特点

有背景色
padding就是内边距。padding的区域有背景颜色
四个方向上右下左

padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;

padding:30px 20px 40px 100px;

一些元素，默认带有padding，比如ul标签。

所以，我们为了做站的时候，便于控制，总是喜欢清除这个默认的padding：

*{
    margin: 0;
    padding: 0;
}

*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后再说）：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
 margin:0;
 padding:04 }

boder

border是一个大综合属性，
1 border:1px solid red;
原来一个border是由三个小属性综合而成：
border-width border-style border-color。

就是把4个边框，都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开，有两大种拆开的方式：
1）按3要素:

border-width、border-style、border-color

2）按方向：

border-top、border-right、border-bottom、border-left

案例:

工作中写法:

标准文档流

1,空白折叠现象
比如，如果我们想让img标签之间没有空隙，必须紧密连接：

<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2,低端对齐现象

3,自动换行,一行写满,另启一行

标准文档流等级森严。标签分为两种等级:
1）块级元素
● 霸占一行，不能与其他任何元素并列
● 能接受宽、高
● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2）行内元素
● 与其他行内元素并排
● 不能设置宽、高。默认的宽度，就是文字的宽度。

互相转换:

span{
    display: block;
    width: 200px;
    height: 200px;
    background-color: pink;
}


div{
    display: inline;
    background-color: pink;
    width: 500px;
    height: 500px;
}