初始CSS

来源：互联网发布：淘宝买家评价多久清空编辑：程序博客网时间：2024/05/20 07:32

，前几篇介绍的HTML只是比较常用的一部分。其他的还需自行了解。
sublime里面的emmet语法快捷键，百度云地址：http://pan.baidu.com/s/1eR1Frk2 密码：fdnp
emmet语法加快了代码的书写。比如在sublime里面输入： .box1>a[#]{$}*4 会得到

 <div class="box1">        <a href="#">1</a>        <a href="#">2</a>        <a href="#">3</a>        <a href="#">4</a>    </div>

一、CSS的整体感知
css是cascading style sheet 层叠式样式表的简写。它为标签提供样式，呈现在网页上。
例如下面定义一个div，没有设置宽高，在网页中什么也不显示。所有需要CSS设置标签样式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <div class="nav"></div></body></html>

CSS样式引入有三种：嵌入样式表、链接外部样式表、内嵌样式（优先级最高）。
嵌入样式表：用<style></style>标签对。
链接外部样式表：用link标签引入外部样式文件。文件以 .css结尾。
内嵌样式：<li style="font-size: large;color: red" >Bigbang</li>
引入位置：<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=""> href为文件路径。 <style></style> </head>
二、选择器
想要设置一个标签属性，肯定要选择中它。
1.标签选择器
标签选择器是选择页面中所有的同类标签。
比如下面是设置了页面中所有div的宽度和高度，背景颜色。

<style>div {        width: 100px;  emmet语法：w100px再tab        height: 100px;         background-color: #000;        }</style>

2.id选择器
id就像人的身份证一样，是唯一的。

#banner {        width: 100px;        height: 100px;        background-color: #000;    }  只选中id为banner的div<body>    <div  id="banner"></div></body>

3.类选择器
一个标签可以有多个class，中间用空格隔开。一个class也可以被多个标签拥有。

.banner {        width: 100px;        height: 100px;        background-color: #000;    }  只选中class（类名）为banner的div<body>    <div  class="banner tab"></div></body>

4.后代选择器

<body>    <div class="div1">        <p>我是p1</p>        <div>            <p>我是p2</p>        </div>    </div></body>

直接后代选择器：.div1>p 选择的是.div1的直接后代<p>我是p1</p>，直接后代为div的儿子而不是孙子辈。

 <style>    .div1>p {        color: red;    }    </style>

直接后代选择器

后代选择器：.div1 p 选择的是.div1的所有后代p

  <style>    .div1 p {        color: red;    }    </style>

后代选择器

5.交集选择器
交集选择器，我们一般都是以标签名开头。
eg： div.special {} 该标签要同时满足是div而且类名是special的才可以选中。div.special中间没有空格

6.并集选择器
eg： div， p {} 选中所有div和p,并集选择器通常用在设置两个标签相同样式时。

7.通配符
*{
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
}
8.相邻兄弟选择器
选择离自己最近的兄弟

9.属性选择器
为具有某个属性的HTML元素定义样式。（CSS3介绍）
上面是CSS中的基本选择器，CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。以后会一一介绍。

三、CSS的继承性和层叠性
继承性：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
color、 text-开头的、line-开头的、font-开头的。这些都是可以继承的。
这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。

层叠性：
层叠性：就是css处理冲突的能力。这个很重要。
当对同一个标签设置样式时，会因为标签选择器权重的问题，一些选择器会被层叠掉。

权重计算：id的数量，类的数量，标签的数量
先比较id,有id的优先，再看数量，数量一样；再比较class，依次类推。

特别：在计算权重之前，要看看是不是选中了要设置的那个标签，如果没有，则权重为0。

当所有都没有选中，那么有一个就近原则：谁描述的近，听谁的。

并集选择器要分开计算：

权重问题的深入：
同一个标签，携带了多个类名，有冲突：

!important标记
给一个属性提高权重。这个属性的权重就是无穷大。

!important需要强调3点：

1） !important提升的是一个属性，而不是一个选择器

2） !important无法提升继承的权重，该是0还是0

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    div {        color: red!important;    }    p {        color: green;    }    </style></head><body>    <div>        <p class="p1" id="p2">我是什么颜色？</p>    </div></body></html>

3）!important不影响就近原则
如果大家都是继承来的（没有选中，权重为0），按理说应该按照“就近原则”。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    div {        color: red!important;    }    ul {        color: green;    }    </style></head><body>    <div>        <ul>            <p class="p1" id="p2">我是什么颜色？</p>        </ul>    </div></body></html>

阅读全文

0 0