您的位置：首页 > Web前端 > CSS

[js]01css基础

2017-08-28 12:05 381 查看

选择器

冲突权重计算

盒模型

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;
}

浮动特点:

0,浮动脱离标准文档流

1,浮动元素相互贴靠

2,浮动有字围效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航