CSS基本语法和选择器

来源：互联网发布：淘宝联盟退运费福袋编辑：程序博客网时间：2024/04/26 14:15

CSS是指层叠样式表（cascading style sheets），样式定义如何显示HTML元素，是真正能够做到网页表现和内容分类的一种语言。

【1】CSS基本语法

【2】CSS两种结合方式

【3】几种选择器

基本语法

基本语法也就两种，在head中使用选择器选择，然后在body中使用，如下中的样式属性键：样式属性值1 样式属性值2...是多个属性值的连用。

<!DOCTYPE html><html>  <head>    <title>02-结合方式2.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><!-- 语法1:选择器{样式属性键: 样式属性值;样式属性键:样式属性值1 样式属性值2 样式属性值3...;/* 注释内容!*/ 语法2:style="样式属性键: 样式属性值;"} --> <style type="text/css"> p{ color:red; } </style>  </head>    <body>   <p  > This is my HTML page. </p>  </body></html>

两种结合方式

<!DOCTYPE html><html>  <head>    <title>01-结合方式1.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--下面是第二种结合方式-->    <style type="text/css"> p{ color:blue; } </style>  </head>    <body>   <p style="color:red;" > 我是在body中直接使用的结合方式 </p>   <p> 我是使用表标签选择器的结合方式了</p>  </body></html>

标签选择器

使用的是html的标签，比如p、h1、a等，也可以是html

<span style="font-size:18px;"><!DOCTYPE html><html>  <head>    <title>02-结合方式2.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 标签选择器:标签名称{}} --> <style type="text/css"> a{ color:blue; background:red; padding:99; } p{ color:#FFFF00; } </style>  </head>    <body>   <a> This is my HTML page. </a>   <p> This is my HTML page. </p>  </body></html></span>

ID选择器

以一种独立于文档元素的方式来指定样式

<!DOCTYPE html><html>  <head>    <title>06-CSS选择器2.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- id选择器:#标签id{}注意: 使用id时.要保证id的值在页面中是唯一的 --> <style type="text/css"> #one{ color:yellow; } #five{ size:88; } </style>  </head>    <body>   <a id="one" > This is my HTML page. </a><br>   <a id="five" > This is just a test. </a><br>   <a> This is my HTML page. </a>  </body></html>

类选择器

其实类选择器是和ID选择器想类似的

<!DOCTYPE html><html>  <head>    <title>07-CSS选择器3.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <!-- class选择器:.class名称{}注意: 使用class选择器，前面要有一个.号 --> <style type="text/css"> .three{ color:green; } </style>  </head>    <body>   <p>This is my HTML page.</p>   <p class="three" >This is my HTML page.</p>   <a class="three" > This is my HTML page. </a><br>   <a> This is my HTML page. </a>  </body></html>

伪类选择器

这个可以控制标签的的某些状态，配合其他选择器来共同使用

<!DOCTYPE html><html>  <head>    <title>07-CSS选择器3.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 伪类选择器:选择标签的某个状态.需要配合其他选择器来使用l link<span style="white-space:pre"></span>未访问过v visited访问过h hover<span style="white-space:pre"></span>悬浮a active激活,点击 --> <style type="text/css"> a:link{ color:green; } a:visited{ color:black; }  a:hover{ color:white; } a:active{ color:pink; } </style>  </head>    <body> <a href="01-结合方式1.html" >点我，看我的状态变化</a>  </body></html>

复合选择器

将ID、类、元素结合在一起来使用，可以看到在body中是分开使用的，在style中是结合在一起的。

<!DOCTYPE html><html>  <head>    <title>09-CSS选择器5.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <style type="text/css"> #one,.two,font{ color:green; } </style>  </head>    <body> <a id="one" >我是ID选择器</a><br> <a class="two" >我是类选择器</a><br> <font>我是元素选择器</font>  </body></html>

2 0