css基础随笔

CSS 基础

CSS（Cascading Style Sheets）层叠样式表。html负责语义的部分，css则是负责样式的部分，定义如何显示HTML元素。

CSS样式表分为内联样式（在HTML元素内部）优先级最高，是具体用在某个标签内部，针对某个标签的。

内部样式表（位于标签内部），在内部定义样式例如

   <head>
   <meta http-equiv="Content-Type" content="text/;charset=UTF-8">
   <title> 内部样式表</title>
   <style type="text/css">
    div{background-color:red;
         font-size:20px;
         width: 100px;
         height: 100px;
     }
     p[class="ip"]{color:gray;
       }    
    </style>      
    </head>

外联样式表（位于css 样式表中)需要使用样式的HTML页面使用标签链接到样式表。标签在HTML文件的标签内:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="zontibuju" />
</head>

链接到了一个名字为zongtibuju的css外部样式表，此HTML表可以应用zongtibuju的样式。

CSS的构成：选择器{声明1；声明2；声明3；……}，声明的构成：属性：属性值；例如： div{background-color:red;font-size:20px;}.

选择器的分类

1. 派生选择器：根据元素在上下文的关系来定义样式。例如：P标签里面有strong标签，strong标签可以定义为

p strong{ color:blue; font-size: 20px; }.

2.id选择器：标有特定id的HTML元素指定的特定样式。它用“#”来定义。例如：有id为taday的标签,其样式可定义为

#taday{ background-color: #fff; font-family:黑体; }.

3.class选择器：具有相同属性的多个标签可利用class选择器来定义，class选择器以一个点号显示。例如有class名字为bg的标签.

bg{background-color: #00f; font-size: 16px; }。

4. 属性选择器：根据元素的属性以及属性值来选择元素。例如想让某个p标签的class为ip的内容变为红色，而其他的不变,可定义为

p[class=”ip”]{color:gray; }。

CSS 基础

选择器的分类

猜你喜欢