CSS构造块的样式：

1.  h1{color:red;background-color:yellow}

其中：h1是选择器，花括号内是声明部分。多个声明之间用分号隔开。

2.为样式规则添加注释：/*...*/。注意不能将一个注释嵌套在另一注释中。如：/*这样做/*是不对的*/因为嵌套在外层注释内*/。注释可以放在样式规则内部。如：img{border:4px solid red;/*margin-right:12px;*/} ，浏览器会显示的只有border样式，因为margin-right 被注释掉。

3.继承：当你为某个元素应用CSS属性时，这些属性不仅会影响该元素还会影响其下的分支元素。如<body><h1>...</h1><p>...</p></body> 当你对body应用CSS属性时h1与p就会继承该属性。

4.应用样式有三种方法：(1)从一个或多个外部文件导入（推荐）；（2）插入到HTML文档的顶部；（3）直接用于代码中特定的HTML元素上。

5.CSS用层叠的原则来考虑特殊性、顺序和重要性。特殊性规则指定选择器的具体程度。顺序规定了晚出现的优先级高。如果以上原则都无法判断有冲突时该优先哪一个就使用重要性规则，如：{color:red !important;}末尾加上!impotant说明这条规则比其他所有规则高。

6.每个CSS属性对于它可以接受哪些值都有不同的规定。对于任何属性如果希望它显示地指出该属性的值与对应元素的父元素对该属性设定的值相同就使用inherit。如：p{border:inherit;}边框通常不会被继承但是这条规则可以让这条段落获得相同样式的边框。大多数CSS都有一些预设值。CSS属性的值很多是长度。所有长度都必须包含数字和单位。单位有：em、px甚至可以写百分数。极少数CSS属性接受纯数字。

7.当一批网页需要以同样样式呈现的时候重复写CSS会显得浪费时间，因此有三种方法可以将CSS应用到多个网页中：外部样式表（首选）、嵌入样式和内联样式（最不可取的方法）。当要加载操作样式表到HTML中时，需要链接样式表。在每个希望使用样式表的HTML的head部分输入<link rel="stylesheet"  href="url.css"/> 其中url.css是样式表的位置和名称。对外部样式表进行修改所有引用它的网页都会自动更新。外部样式表里的URL是相对于服务器上该样式表文件的位置而不是相对于HTML页面位置。嵌入样式表是在head部分创建style元素，其中包含样式表。内联样式是在html代码中加入CSS样式，在希望进行格式化的html元素的开始标签中输入style=" "。这种方法将html与css混合在一起难于阅读，而且只能限制了CSS样式只能用于一种元素。需要注意的是内联样式的优先级高于其他样式，除非其他样式标记了!important。

8.为什么晚出现的样式优先级越高？因为link元素在html代码中出现的早就会被晚出现的样式覆盖。外部样式表要么是通过链接引入的要么是通过@import导入。不推荐后一种方法因为当引入的样式与后面有与之冲突的样式，则后出现的样式会覆盖这些引入的样式。

9.指定与媒体相关的样式表的步骤：在link或style元素的开始标签中添加media="output"，其中output可以是print、screen、all等，多个值之间用逗号分隔。

定义选择器：

选择器可以定义五个不同标准来选择要进行的格式化的元素：

（1）元素的类型或名称，如：h1{color:red;}使用这个选择器会对页面中的h1元素应用样式。

（2）元素所在的上下文，如：h1 em{color:red;} 使用这个选择器只会对h1中em元素应用样式。

（3）元素的类或ID，如：.error{color:red'}类选择器选择所有属于error泪的元素。#gaudi{color:red;}ID选择器选择ID为gaudi的那个元素。通过在class或id选择器前面添加目标元素的名称，可以增强选择器的特殊性。如，strong.error{color:red;}。

（4）元素的伪类或伪元素，如：a:link{color:red;}选择器选择属于link伪类的a元素。

（5）元素是否有某属性和值，如：a[title]{color:red;}该选择器选择了所有具有title属性的a元素。a[href="www.baidu.com"]{color:red;}选择器选择了指向百度页面的a元素。

注意：通配符*匹配代码中任何元素的名称。可以在一个选择器中使用一组元素名称，名称之间用逗号分隔。类名可以不唯一，但ID名必需唯一。如果要定位的元素有多个类名，可以在选择器中将它们连在一起，类名之间没有空格。

10.上下文选择元素的几种类型：

（1）.architect p{color:red;}表示这个选择器会寻找任何作为architect类元素的后代。

（2）.architect > p{color:red;}这个选择器仅选择architect类元素的直接子元素。

（3）. architect p+p{color:red;}选择器选择直接跟在同胞p元素之后的元素。

11.选择第一个或最后一个子元素：first-child和last-child。可以只修改第一个或最后一个元素的样式。如：首字母大写格式就可以写成：p:first-letter{font-size:1.4em;}。

12.按状态选择链接元素：

a:link{color:red;}新的、未访问的链接显示为红色。

a:visited{color:orange;}访问过的链接变为橙色。

a:focus{color:purple;}链接获得焦点（如通过tab键）时显示为紫色。

a:hover{color:green;}当访问者将鼠标指针停留在链接上时显示绿色。

a:active{color:blue;}当访问者激活链接时，变成蓝色。

也可以对其他类型的元素使用:active、:hover伪类。如：设置p:hover{color:red;}以后，鼠标停留在任何段落上都会显示为红色。

13.由于链接可能同时处于多种状态，且最晚出现的规则会覆盖前面出现的规则所以一定要按顺序定义规则：LVFHA、LVHFA。

14.属性选择器参考表：

[attribute]:匹配指定属性，不论具体值是什么。

[attribute="value"]:完全匹配指定属性值。

[attribute~="value"]:属性值是以空格分隔的多个单词，其中有一个完全匹配指定值。

[attribute|="value"]:属性值以value-开头。

[attribute^="value"]:属性值以value开头，value为完整的单词或单词的一部分。

[attribute$="value"]:属性值以value结尾，value为完整的单词或单词的一部分。

[attribute*="value"]:属性值为指定值的子字符串。

15.指定元素组：

h1,h2{color:red;}可以让h1与h2显示红色。为多个元素指定同一种样式时只需要用逗号分隔它们。

16.组合使用选择器：如：.project h2[lang|="es"]+p em{color:red;} 表明：仅选择em元素，它们包含在p元素中，这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素。

CSS样式与选择器的更多相关文章

  1. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  2. 日常：css样式、选择器、个别知识点、数组array

    优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...

  3. 前端之css样式（选择器）。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. java基础57 css样式、选择器和css定位（网页知识）

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  5. 前端基础之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  6. 前端之css样式（选择器）

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  7. css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  8. css样式高级技巧-选择器

    用<div>元素为网页 在编写样式表时,我们经常要用div元素来包装内容: <div> <p>Here are two paragraphs of content& ...

  9. CSS样式之选择器

    一.CSS选择器构成 CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...

随机推荐

  1. 整理了一份React-Native学习指南

    原文:  http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull ...

  2. jquery如何获取url中问号后面的数值

    假如路径是这样的:www.domain.com/list/?menu=1 var locationUrl = location.search.substring(6); switch(location ...

  3. redirect-action

    功能: 点击login , redirect 到hello.jsp 显示 "hello" 点击redirect, redirect 到 error.jsp 显示 "err ...

  4. tensorflow安装相关的

    1 Install pip and Virtualenv sudo apt-get install python-pip python-dev python-virtualenv2 Create a ...

  5. Distributing Parts

    Distributing Parts 题目链接:http://codeforces.com/problemset/problem/496/E 贪心 将音乐和人都以低音升序排序,贪心处理低音更低的音乐, ...

  6. html5权威指南：html全局属性

    html全局属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp 辅助记忆:(ail1,s2,c3,t3,d4)(acd ...

  7. soapui工具使用时400 Bad Request

    因为项目中用json格式进行传输数据,多次确认json中的各个属性与接口中的对象属性一致,还是不能正常访问到接口.想起json数据中有中文, 在soapui的左下角将Encoding 的值设为utf- ...

  8. java 读取excel 将数据插入到数据库

    import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.sql.Con ...

  9. JS计算字符串长度（中文算2个）

    /** * @return {number} */ getRealLength = function(str) { var realLength = 0, len = str.length, char ...

  10. 关于python的类方法、实例方法和静态方法区别

    python的类方法需要在方法前面加装饰器:@classmethod ,静态方法是在方法前面加装饰器:@staticmethod. 类方法.类属性是属于类自身,属于类自身的命名空间,和实例方法.实例属 ...