CSS 基础知识（认识选择器）

时间：2017-04-16 20:10:56 收藏：0 阅读：286

定义：

层叠样式表 (Cascading Style Sheets)
主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等，设置文本和背景属性的能力，为任何元素创建边框及距离

语言特点：

易于修改、使用，将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
多页面应用多个页面中使用同一个CSS样式表。
层叠对一个元素多次设置同一个样式，这将使用最后一次设置的属性值
页面压缩将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间

CSS代码语法：

css样式由选择符和声明组成，声明由属性和值组成，如图所示

技术分享

选择符：又称选择器，指明网页中要应用样式规则的元素

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

注释：CSS中也有注释语句：用/*注释语句*/来标明（Html中使用) ，即：ctrl+?

CSS中的基本样式：

3种：内联式、嵌入式、外联式

内联式：css代码直接写在现有的HTML标签中

<p style="color:red;font-size:12px">这是一个内联式。</p>

嵌入式：可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。

<style type="text/css">
span{
color:red;}</style>

外联式：css代码写在一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内，使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="text.css" rel="stylesheet" type="text/css" />

优先级：内联式>嵌入式>外联式

认识CSS中的选择器：

标签选择器/元素选择器

标签选择器就是html代码中的标签，比如<html><body><h1><p><img><ul>等

p{
   font-size: 20px;
}

id 选择器

为标签设置id="ID名称"，而不是class="类名称"。
ID选择符的前面是井号（#）号,<div id ="box1"></div>
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

#box1{
   width: 50px;
   height: 50px;
   background-color:red;
}

类选择器

使用合适的标签把要修饰的内容标记起来<p>你好<p>
用class="类选择器名称"为标签设置一个类 <div class="box1"><p>你好</p></div>
设置css样式 .box1{color:blue;}

.box1{
   width: 160px;
   height: 80px;
   background-color:rosybrown;
}

属性选择器：

对带有指定属性的 HTML 元素设置样式。

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

后代选择器：后代选择器是作用于所有子后代元素

<p>这是一个<span>文档</p>

span{
   color: darkblue;
}

分组选择器：

/*同类兄弟第 第n个被选中*/
li:nth-child(7){
   background-color: pink;
}
/*同类兄弟倒数第n个选中*/
li:nth-last-child(7){
   background-color: blueviolet;
}
/*同类兄弟倒数第1个选中*/
li:first-child{
   background-color: aquamarine;
}
/*同类兄弟倒数最后1个选中*/
li:last-child{
   background-color: brown;
}
/*奇数项选中*/
li:nth-child(odd){
   background-color: darkblue;
}
/*偶数项*/
li:nth-child(even){
   background-color: coral;
}
/*_每。。。。一个循环，（_n从0开始，数字3可以随便更改—）—*/
li:nth-child(3n){
   background-color: darkred;
}

子集选择器：子选择器是通过“>”进行选择。>作用于元素的第一代后代

ul>li{
   border: 1px d
   ashed red;
}

并集选择器：同时选中所有标签，一并给予属性值

h1,h2,h3,h4,h5,h6{
   font-weight: normal;
}

伪类选择器：允许给html不存在的标签（标签的某种状态）设置样式

/*a初始颜色/未被访问*/
a:link{
   color: red;
}
/*访问以后*/
a:visited{
   color:gold;
}
/*当鼠标悬停/移入*/
a:hover{
   color: blue;
}
/*点击时*/
a:active{
   font-size: 33px;
}

伪元素：

/*________________伪元素____________*/
.pl:first-line{
   color: pink;
}
.pl:first-letter{
   font-size: 22px;
}
a:before{
   content: "请点击";     //a标签前面添加文字
}
a:after{
   content:  "嘿嘿";     //a标签后面添加文字
}

原文：http://www.cnblogs.com/lingzi940924/p/6719682.html