CSS 基础

  • 1.概念

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

2.样式层叠次序

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

3.语法

css内容本质是选择器。
selector {property: value}
示例:
h1 {color:red; font-size:14px;}
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

4.选择器特性

4.1选择器的分组

示例:
h1,h2,h3,h4,h5,h6 { color: green; }
对所有的标题元素进行了分组。所有的标题元素都是绿色的。

4.2选择器的继承

示例:
body { font-family: Verdana, sans-serif; }
根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

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

     body  {
     font-family: Verdana, sans-serif;
     }

     td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

     p  {
     font-family: Times, "Times New Roman", serif;
     }

5.选择器类型

5.1派生选择器

     strong {
     color: red;
     }

     h2 {
     color: red;
     }

     h2 strong {
     color: blue;
     }

效果

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

5.2 id选择器

示例:

#red {color:red;}
#green {color:green;}

效果

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意:id 属性只能在每个 HTML 文档中出现一次。想知道原因吗,请参阅 XHTML:网站重构

5.3 类选择器

示例:

//所有拥有 center 类的 HTML 元素均为居中
.center {text-align: center}

//和 id 一样,class 也可被用作派生选择器,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字:
.fancy td {color: #f60; background: #666; }

//元素也可以基于它们的类而被选择,类名为 fancy 的表格单元将是带有灰色背景的橙色:
td.fancy {color: #f60; background: #666; }

注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

5.4 属性选择器

示例:

//带有 title 属性的所有元素设置样式
[title]{color:red;}

//为 title="W3School" 的所有元素设置样式
[title=W3School]{border:5px solid blue;}

//包含指定值的 title 属性的所有元素设置样式
[title~=hello] { color:red; }

示例:
<a title="W3School" href="http://w3school.com.cn">W3School</a>
选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute=value] 匹配属性值中包含指定值的每个元素。

6.参考

https://www.w3school.com.cn/css/index.asp

推荐阅读更多精彩内容

  • 公共样式 快捷键 alt+shift+F:格式化(快速整理) Normalize.css:不同浏览器的默认样式存在...
    Aki_miu阅读 32评论 0 0
  • 一、CSS简介 1、简单介绍 CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何...
    千年幸福论阅读 157评论 0 0
  • CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储...
    霖风_阅读 109评论 0 0
  • CSS常用选择器 通配符选择器 * id选择器(id #) 类选择器(class .) 元素选择器(E) 后代选...
    everfight阅读 174评论 3 3
  • CSS (Cascading Style Sheets) 简介: 多重样式将层叠为一个样式表允许以多种方式规定样式...
    safiriGitHub阅读 149评论 0 1