菜鸟备忘之CSS基础

来源：互联网发布：ubuntu精简版下载编辑：程序博客网时间：2024/06/08 14:03

还是静下心来看下css【叠样式表 (Cascading Style Sheets)】，对于css的基础，做此备忘。只为更简单！ --Rydiy

1、规则：选择器 {一条或多条声明}

selector {declaration1; declaration2; ... declarationN }

关于selector

我的理解是有三种：

html标签    body {color: red;}  #id   #demo {color: red;}   使用：  id=“demo”.class  .demo {color: red}  使用： class=“demo”

2、继承：

body {color: red;}

html中body中所有元素都使用这个属性。

body的子元素p、td等都会继承body

3、派生

body  demo{color： red;}  只对body中的demo标签有效.demo td{color: red;}  对于使用.demo的标签下的td有效td.demo {color: red;}  对使用.demo的td标签有效

4、指定属性

input[title="text"]{color: red;}

对所有含title属性并值为text的所有input标签有效

[title]{color:red;} 对所有含title的标签有效

特别的：

[title~="text"] 适用于用空格分隔的属性： title=text a b c

[title|="text"] 适用于用连字符的设置： title=text|a|b|c

5、创建方式

外部样式表：

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

内部样式表:

<head><style type="text/css">  hr {color: sienna;}</style></head>

内联样式：

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