CSS学习笔记

来源：互联网发布：javascript写的小游戏编辑：程序博客网时间：2024/06/06 09:15

1.基本语法
选择器 {属性：值；属性：值}

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

分组选择器：可以多个元素享有同样样式

h1,h2,h3{color:red;}

继承：body下的所有字体都是Verdana

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

上下文派生选择器：

h2 {    color:red;}h2 strong {    color:blue;}//运行结果<h2>红色</h2><h2><strong>蓝色</strong></h2>

后代选择器（descendant selector）又称为包含选择器：
和上下文选择器类似，即两个元素之间的层次间隔可以是无限的。

ul em{    color:red;}<ul><li><em>红</em></li><li><ol><li><em>红</em></li></ol></li></ul>

id 选择器：
以元素的id值来显示样式

#red{    color:red;}<p id="red">红</p>//在现代布局中，id 选择器常常用于建立派生选择器#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }//上段代码意思是 在id为sidebar的元素下所有P标签特殊处理

CSS 类选择器：

.myclass{    color:red;}//类选择器也可以作为派生选择器.myclass p{    color:blue;}td.myclass {    color:red;}//类名为 myclass 的表格单元将是带有红色<td class="myclass"/>

CSS 属性选择器：

//属性选择器通常都用[]包裹[title]{    color:red;}<h1 title="1">红色</h1>//下面是title属性值为yaw的都红[title=yaw]{    color:red;}<h1 title="yaw">红</h1>//下面是title属性值有hello前后有空格隔开都可以变成红色[title~=hello]{    color:red;}<h1 title="hello yaw">红</h1><h1 title="yaw hello">红</h1>

如何创建 CSS：
如何把样式表关联到HTML文件里面呢？

1.外部样式表<head><link rel="stylesheet" type="text/css" href="mycss.css"/></head>2.内部样式表<head><style type="text/css">    hr{color:red;}</style></head>3.内联样式<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

列表样式：

//将列表的标志从默认圆点变成方块ul {list-style-type:square}

0 0