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. 用angular实现$.param()

    首先介绍一下$.param() 功能: 序列化对象或数组,返回字符串 eg: var params = { width:1900, height:1200 }; var str = jQuery.pa ...

  2. 为什么重写equals()必须重写hashCode()

    主要原因是因为hashCode是用对象的内部地址转换成一个整数的,而equals比较得是两个对象,或者是两个对象的内容 如果你重写了equals,而保留hashCode的实现不变,那么很可能两个对象明 ...

  3. MD5的Hash长度扩展攻击

    Hash长度扩展攻击 引子 无意中碰到一道题,大概代码是这样的 $flag = "XXXXXXXXXXXXXXXXXXXXXXX"; $secret = "XXXXXXX ...

  4. Webstrom 常用操作记录

    WebStorm 编译 es6 与 scss 的教程: http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-tran ...

  5. java 守护线程

    守护线程生命周期: 守护线程是运行在后台的一种特殊线程, 它独立于控制终端并且周期性地执行某种任务或者等待处理某些发生的事件. 也就是说守护线程不依赖于终端,但是依赖于系统,与系统“同生共死”. 当J ...

  6. Windows下Discuz搭建论坛过程

    搭建环境:Win7 + XAMPP5.5 + Discuz3.2 GBK 官方论坛下载安装包,解压,把upload文件夹拷贝到网站文档根目录(例如我的为:D:\IT\XAMPP5.5\htdocs\) ...

  7. 正向代理vs.反向代理

    正向代理         也就是传说中的代理,他的工作原理就像一个跳板,简单的说,我是一个用户,我访问不了某网站,但是我能访问一个代理服务器这个代理服务器呢,他能访问那个我不能访问的网站于是我先连上代 ...

  8. eclipse怎么连接到MySQL中的表！！！！！

    简介: 用eclipse编写的好的代码,我们怎么才能连接到数据库呢?对于初学者,特别是在连接数据库这块经常会发生一些莫名的错误,一般来说,归根是我们连接数据库这一过程发生错误.那么我们如何来解决呢?那 ...

  9. Java Web 开发环境快速搭建

    Java Web 开发环境快速搭建 在因某种原因更换开发设备后,可依据此文快速搭建开发环境,恢复工作环境. Java开发环境: Windows 10 (64-bit) Oralce JDK Eclip ...

  10. ACdream 1064 完美数

    数位dp. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #incl ...