语法

  1. h1 {color:red; font-size:14px;}

共享声明

  1. h1,h2,h3,h4,h5,h6 {
  2. color: green;
  3. }

继承

通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则。

  1. body {
  2. font-family: Verdana, sans-serif;
  3. }
  4. td, ul, ol, ul, li, dl, dt, dd {
  5. font-family: Verdana, sans-serif;
  6. }
  7. p {
  8. font-family: Times, "Times New Roman", serif;
  9. }

派生

  1. strong {
  2. color: red;
  3. }
  4. h2 {
  5. color: red;
  6. }
  7. h2 strong {
  8. color: blue;
  9. }

id选择器

  1. #red {color:red;}
  2. #green {color:green;}

id 选择器和派生选择器

  1. #sidebar p {
  2. font-style: italic;
  3. text-align: right;
  4. margin-top: 0.5em;
  5. }

类选择器

  1. .center {text-align: center}

class 也可被用作派生选择器

  1. .fancy td {
  2. color: #f60;
  3. background: #666;
  4. }

类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

元素也可以基于它们的类而被选择:

  1. td.fancy {
  2. color: #f60;
  3. background: #666;
  4. }
  1. <td class="fancy">

那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。

属性选择器

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

  1. <style>
  2. [lang|=en]
  3. {
  4. background:yellow;
  5. }
  6. </style>
  7. <p lang="en">Hello!</p>
  8. <p lang="en-us">Hi!</p>
  9. <p lang="en-gb">Ello!</p>
  10. <p lang="us">Hi!</p>
  11. <p lang="zh">nihao!</p>

只有中间是横杠才有效。

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

引入样式表

引入(优)

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="mystyle.css" />
  3. </head>

内部(次之)

  1. <head>
  2. <style type="text/css">
  3. hr {color: sienna;}
  4. p {margin-left: 20px;}
  5. body {background-image: url("images/back40.gif");}
  6. </style>
  7. </head>

内联(不建议)

  1. <p style="color: sienna; margin-left: 20px">
  2. This is a paragraph
  3. </p>

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 h3 选择器的三个属性:

  1. h3 {
  2. color: red;
  3. text-align: left;
  4. font-size: 8pt;
  5. }

而内部样式表拥有针对 h3 选择器的两个属性:

  1. h3 {
  2. text-align: right;
  3. font-size: 20pt;
  4. }

假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

  1. color: red;
  2. text-align: right;
  3. font-size: 20pt;

即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

CSS 再学习,基础篇的更多相关文章

  1. Docker虚拟化实战学习——基础篇(转)

    Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker   Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...

  2. [转]C++学习–基础篇(书籍推荐及分享)

    C++入门 语言技巧,性能优化 底层硬货 STL Boost 设计模式 算法篇 算起来,用C++已经有七八年时间,也有点可以分享的东西: 以下推荐的书籍大多有电子版.对于技术类书籍,电子版并不会带来一 ...

  3. ios学习基础篇一

    搜集的不错的oc学习资料 大概总结: http://my.oschina.net/luoguankun/blog/208526 详细教程: http://www.w3cschool.cc/ios/io ...

  4. Laravel学习基础篇之--路由

    终于还是决定再多学一门重量级框架,当然首选必备还是被称为最优雅的Web开发框架--Laravel 对于框架的入门,首先了解它的路由规则是先前必备的,以下是laravel 中几种常见的基础路由规则 // ...

  5. Flume搭建及学习(基础篇)

    转载请注明原文出处:http://www.cnblogs.com/lighten/p/6830439.html 1.简介 该文主要是翻译官方的相关文档,源地址点击这里.介绍一下Flume的一些基本知识 ...

  6. Bat 脚本学习 (基础篇)

    [转]Bat 脚本学习 2015-01-05 14:13 115人阅读 评论(0) 收藏 举报 基础部分: ============================================== ...

  7. CSS快速入门基础篇,让你快速上手(附带代码案例)

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  8. [性能测试] locust学习-基础篇

    在本文中,我将介绍一个名为Locust的性能测试工具.我将从Locust的功能特性出发,结合实例对Locust的使用方法进行介绍. 概述 Locust主要有以下的功能特性: 在Locust测试框架中, ...

  9. JavaScript学习基础篇【第1篇】: JavaScript 入门

    JavaScript 快速入门 JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中,由<script>...< ...

随机推荐

  1. iOS 单例用法

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...

  2. 整数快速幂hdu(1852)

    hdu1852 Beijing 2008 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others ...

  3. Oracle下where子句

    课外题 要求:删除某一个用户,同时保留该用户的数据?如何解决 alter user scott account lock :改天需要使用则解锁unlock 锁定用户使用sysdba登录还是可以查看数据 ...

  4. ABP 样板开发框架系列

    --ABP 官网与源码 http://www.aspnetboilerplate.com/ https://github.com/aspnetboilerplate --pdf和docx 文档 htt ...

  5. HI3518E用J-link烧写裸板fastboot u-boot流程

    Hi3518E的裸板烧写fastboot是不能像HI3531那样,可以通过FB直接烧写.遵循ARM9的烧写流程.其中一般u-boot的烧写流程可分为几类:第一:通过编程器芯片直接烧写:第二通过RVDS ...

  6. 【生产问题】write log 引起系统卡死,业务全部阻塞

    解决办法:https://www.sqlskills.com/help/waits/writelog/ [生产问题]write log 引起系统卡死,业务全部阻塞 writelog不成功不作数的,所以 ...

  7. java-mybaits-009-mybatis-spring-使用,SqlSessionFactoryBean、事务

    一.版本限制 参看地址:http://www.mybatis.org/spring/ 二.使用入门 2.1.pom <dependency> <groupId>org.myba ...

  8. IETF国标查询

    IETF官网 https://www.ietf.org/ rfc国标官网 https://www.ietf.org/standards/rfcs/ rfc国标查询 https://www.rfc-ed ...

  9. selenium自我手册

    (转载需注明原文地址和作者两项,否则视为非授权) 语言:python 0x00 预热 下载安装包 pip install selenium 确定所用的浏览器 支持firefox,chrome,IE,e ...

  10. (24)如何使用HttpClient

    介绍 HttpClient是HTTP客户端的接口.HttpClient封装了各种对象,处理cookies,身份认证,连接管理等. 概念 HttpClient的使用一般包含下面6个步骤: 创建 Http ...