前端学习笔记-CSS系列(一)选择器

2016-07-10 本文已影响136人多喝热水z

CSS简介

CSS(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
嗯，简单的说，就是用来美化网页的。

使用方法

有三种方法可以在站点网页上使用样式表：

外联式Linking（也叫外部样式）：将网页链接到外部样式表。
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

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

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

    <head>
    <style type="text/css"> 
    body {background-color: red} 
    p {margin-left: 20px}
    </style>
    </head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px"> 
This is a paragraph 
</p>

基本形式

那我们看到CSS选择器的基本形式是这样的

selector(选择器){
    property1:value;(属性声明)
    property2:value;
}

由一个选择器表达式和括号内的属性字典组成

兼容模式

目前的主流浏览器有很多种，那么我们为了兼容不同的浏览器，就要知道浏览器的私有属性

Chrome,Safari
-webkit
Firebox
-moz
IE
-ms
Opera
-o

例子

  .pic{
    -webkit-transform:rotate(-3deg);
    -otransform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    transform:rotate(-3deg);
  }

语法

属性值语法
margin:[<length>|<percentage>|auto]{1,4}
上面这个表达式由基本元素、组合符号、数量符号三部分组成。下面我们将逐步对这三个部分进行详解。
基本元素组成
1.关键字 auto solid bold
2.基本类型 length percentage color
3.其他类型 'padding-width' color-stop
组合符号
1.空格
<‘font-size’> <font-family>
必须按顺序输入相对属性值
E.g
-12px arial
2.&& 与空格相似不过可以无序
3.|| 分割的基本属性至少出现一个
4.| 分割的属性只能出现一个
5.[] 属性分组

数量符号
1.默认只能出现一次
2.+ 1次或多次
3.？表示属性可选
4.{int,int} 第一个数字表示最少出现次数第二个数字表示最多出现次数
5.* 可以出现 0次1次或者多次
6.# 出现一次或者多次中间要用逗号隔开
E.g
1
padding-top:<length>|<percentage>

    true padding-top:1px
    false padding-top:1em 5%
    2
    border-width:[<length>|thick|medium|thin]{1,4}

    true border-width:2px;
    false border-width:2px small;
    3
    box-shadow:[inset?&&[<length>{2,4}&& <color>?]]#|none

    true box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset;
    false box-shadow:inset 2px 4px,2px blue;

@规则语法
@标识符 xxx:
@标识符 xxx{}
常用@规则
@media 响应式布局
@keyframes 用来描述css动画中间步骤
@font-face 引入外部字体
不常用
@import
@charset
@namespace
@page
@supports
@document

选择器

选择器主要分

简单选择器
伪元素选择器
组合选择器

简单选择器

标签选择器
基本形式
tag{color:bule;}
类选择器
基本形式
.className{}
选择器特点

由字母，数字，-，_组成
必须以字母开头
区分大小写
可以出现多次
e.g
<p chass = "special">
<p class = “special stress”>
如果想让special类为红色
.special{color:red;}
属性可以叠加
.stress{font-weight:bold;}
这样第二个p标签同时会拥有两个属性

id选择器
基本形式
#idName{}
选择器特点

由字母，数字，-，_组成
必须以#开头
区分大小写
只能出现一次

通配符选择器
基本形式
*{}
作用:会选择页面内所有元素
属性选择器
基本形式
[]{}

e.g

不可用状态样式
[disabled]{background:#eee}
类型是button的样式

    [type=button]{color:blue;}

类包含XXX
[class~=xxxx]{color:blue;}
链接中以#开头
[href^=“#”]{color:red;};
链接中以某形式结尾比如.pdf
[herf$=pdf]{color:red;};
链接中包含某些值
[href*=“xxxx.xxx.com”]

伪类选择器
基本形式
tag:statement{}

e.g

所有链接字体颜色只能选择herf有值的
a:link{}
表示访问过的
a:visited{}
悬停
a:hover{}
点击上去
a:active{}

input标签的三种状态

    input:enabled/disabled/checked{}

列表行li标签

第一行或最后一行
li:first-child/last-child{}
偶数行
li:nth-child(even){}
表达式
li:nth-child(3n+1){}
倒数
li:nth-last-child(3n+1){}
标签下只有一个子元素的
tag:only-child{}

选择某标签类型的

表示选择第一个dd类型的
dd:first-of-type{}

简单选择器还可以进行组合

e.g

如果我们想选择img标签 jpg结尾的元素

img[src$=jpg]{}

id是banner hover状态的元素
#banner:hover{}

伪元素选择器

选择页面所有元素第一个字母

::first-letter{}

第一行

::first-line{}

在内容包含XX之前

::before{content:”XX”;};

之后

::after{content:”XX”}；

内容被用户选中样式

::selection{}

组合选择器

后代选择器

e.g

class="main" 所有是h2标签的元素
.main h2 {}

子选择器
class="main" 第一个标签h2的元素
.main>h2 {}
相邻兄弟选择器
选中h2后相邻的p元素
h2+p{}
通用兄弟选择器
h2后所有的p节点
h2~p{}
选择器分组
h1,h2,h3{}

如有不足，请各位大大进行批评指正。谢谢