css基础详解

╰+哭是因爲堅強的太久メ 2023-10-18 08:59 12阅读 0赞

**目录**

（一）添加CSS的三种方法

1、链接外部样式表

2、内部样式表

3、内嵌样式（慎用，会损失掉样式表的很多优势）

4、多重样式的优先级

（二）CSS的基本语法

（三）CSS选择器

一、id选择器：

二、类（class）选择器：

1、结合标签选择器使用（范围更加确定）

2、多类选择器（不常用，因为没有必要这么麻烦）

三、标签选择器，多个标签选择器用逗号分开。

四、属性选择器

五、派生选择器（层次选择器）

六：复合选择器

七、子选择器

八、伪类选择器（pseudo classes）

九、伪元素（pseudo element）

附录：常见CSS属性值

一 CSS文字属性：

二、CSS衬距空白

三、CSS符号属性：

四、CSS背景样式：

五、CSS超连接属性：

六、CSS框线一览表：

七、CSS边距样式：

八、段落文本样式(Text Style)

九、框架样式(Box Style)

--------------------

**在网上看到一些好看的样式，可以直接去源代码搜索定位，参考是如何设置的。**

**各种样式都可以通过Dreamweaver来设置。**

CSS（cascading style sheet）：层叠样式表，为网页添加样式特效。

**\* 相当于选择器，代表html所有的元素**

**<pre>标签：用于保留内容的格式。**

**<pre>内容</pre>**

## **（一）添加CSS的三种方法** ##

### **1、链接外部样式表** ###

每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部<head>标签。

<head>

<linkrel="stylesheet"type="text/css"href="mystyle.css">

</head>

说明：rel：表示使用外部的样式表 type：表示文件的类型是样式表文件 href：表示文件所在位置

### **2、内部样式表** ###

使用 <style> 标签在文档头部定义内部样式表。

<head>
        
        <style>
    
        hr {color:sienna;}
    
        p {margin-left:20px;}
    
        body {background-image:url("images/back40.gif");}
    
        </style>
    
    </head>

### **3、内嵌样式（慎用，会损失掉样式表的很多优势）** ###

使用标签的style属性，给标签添加样式。Style 属性可以包含任何 CSS 属性。

<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>

### **4、多重样式的优先级** ###

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

## **（二）CSS的基本语法** ##

CSS的语法结构由3部分组成：选择符（selector），样式属性（property）和值（value）

格式：选择符\{样式属性：取值；样式属性：取值；...\}

其中：属性和值成对出现，用冒号指定，多个属性用分号分开。

## **（三）CSS选择器** ##

选择器（selector）：用于选取HTML的标签，给其添加样式。

### **一、id选择器：** ###

标有特定 id 的 HTML 标签指定特定的样式，id选择器以\#开头。**只能使用一次，不能结合使用。每个标签的id都是唯一的，不能相同。**

#para1{
        text-align:center;
        color:red;
    }

### **二、类（class）选择器：** ###

HTML标签的class属性用于规定HTML标签的类名。HTML5中，class属性可以用于所有标签，但是不一定都有用。**类名的命名不能以数字开头，区分大小写。不同的标签的类名可以相同。**

可以给 HTML 元素赋予多个 class，用空格分开。例如：<span class="left\_menu important">。这么做可以把若干个 CSS 类合并到一个 HTML 元素。

类（class）选择器以"."显示。

实例：

.center {text-align:center;}

#### **1、结合标签选择器使用（范围更加确定）** ####

p.important {color:red;}

#### **2、多类选择器（不常用，因为没有必要这么麻烦）** ####

一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

### **三、标签选择器，多个标签选择器用逗号分开。** ###

h1,h2,h3,h4,h5,h6 {
      color: green;
      }

###  **四、属性选择器** ###

属性选择器可以根据元素的属性及属性值来选择元素。即通过属性来选择对应的标签。

也可在其他选择器上，再添加对属性的匹配。

a[href] {color:red;}
    
    .readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;}

### **五、派生选择器（层次选择器）** ###

**父选择器** **子选择器** ：满足父选择器下的子选择器条件；两者中间用**空格**隔开。

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_element_element.asp" title="element&nbsp;element" rel="nofollow">element&nbsp;element</a></td> 
   <td>div p</td> 
   <td>选择 &lt;div&gt; 元素内的所有 &lt;p&gt; 元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_element_gt.asp" title="element>element" rel="nofollow">element&gt;element</a></td> 
   <td>div &gt; p</td> 
   <td>选择其父元素是 &lt;div&gt; 元素的所有 &lt;p&gt; 元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_element_plus.asp" title="element+element" rel="nofollow">element+element</a></td> 
   <td>div + p</td> 
   <td>选择所有紧随 &lt;div&gt; 元素之后的 &lt;p&gt; 元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_gen_sibling.asp" title="element1~element2" rel="nofollow">element1~element2</a></td> 
   <td>p ~ ul</td> 
   <td>选择前面有 &lt;p&gt; 元素的每个 &lt;ul&gt; 元素。</td> 
  </tr> 
 </tbody> 
</table>

Div input{background-color:Green} /* 表示div下的input子元素 */
    
    .showInfo_tabel  tr{height:20px;} /* 表示table的class为showInfo_tabel时，下面的tr元素height属性为20px  */

### 六：复合选择器 ###

**元素名称1**,**元素名称2**,**\#id**,**.ClassName** ：可以根据元素的名称、id、类名，使符合条件的元素共同拥有样式，各选择器条件要以逗**号(,)**隔开。

h2,#subid,.subclass {font-size:20px;}

### **七、子选择器** ###

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

子结合符两边可以有空白符，这是可选的。

h1 > strong {color:red;}

### **八、伪类选择器（pseudo classes）** ###

CSS 伪类用于向某些选择器添加特殊的效果。

语法 ：**其他选择器** **伪类选择器**

伪类的语法：

a:link {color: #FF0000}	/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */

> 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

> 伪类由**一个**冒号`:`开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

> 任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
   <th>CSS</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_active.asp" title=":active" rel="nofollow">:active</a></td> 
   <td>向被激活的元素添加样式。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_focus.asp" title=":focus" rel="nofollow">:focus</a></td> 
   <td>向拥有键盘输入焦点的元素添加样式。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_hover.asp" title=":hover" rel="nofollow">:hover</a></td> 
   <td>当鼠标悬浮在元素上方时，向元素添加样式。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_link.asp" title=":link" rel="nofollow">:link</a></td> 
   <td>向未被访问的链接添加样式。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_visited.asp" title=":visited" rel="nofollow">:visited</a></td> 
   <td>向已被访问的链接添加样式。</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_first-child.asp" title=":first-child" rel="nofollow">:first-child</a></td> 
   <td>向元素的第一个子元素添加样式。</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/cssref/pr_pseudo_lang.asp" title=":lang" rel="nofollow">:lang</a></td> 
   <td>向带有指定 lang 属性的元素添加样式。</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

### **九、伪元素（pseudo element）** ###

CSS 伪元素用于设置元素指定部分的样式。

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的`::before`,`::after`）。

一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

*  设置元素的首字母、首行的样式
 *  在元素的内容之前或之后插入内容

<table> 
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>例子</th> 
   <th>例子描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_after.asp" title="::after" rel="nofollow">::after</a></td> 
   <td>p::after</td> 
   <td>在每个 &lt;p&gt; 元素之后插入内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_before.asp" title="::before" rel="nofollow">::before</a></td> 
   <td>p::before</td> 
   <td>在每个 &lt;p&gt; 元素之前插入内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_first-letter.asp" title="::first-letter" rel="nofollow">::first-letter</a></td> 
   <td>p::first-letter</td> 
   <td>选择每个 &lt;p&gt; 元素的首字母。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_first-line.asp" title="::first-line" rel="nofollow">::first-line</a></td> 
   <td>p::first-line</td> 
   <td>选择每个 &lt;p&gt; 元素的首行。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/cssref/selector_selection.asp" title="::selection" rel="nofollow">::selection</a></td> 
   <td>p::selection</td> 
   <td>选择用户选择的元素部分。</td> 
  </tr> 
 </tbody> 
</table>

伪元素的语法：

//<p>标签首行设置颜色
    p::first-line {
      color: #ff0000;
      font-variant: small-caps;
    }

CSS 类也可以与伪元素配合使用：

//class为intro的<p>标签首字母设置颜色和大小
    p.intro::first-letter {
      color: #ff0000;
      font-size: 200%;
    }

## 附录：常见CSS属性值 ##

### **一 CSS文字属性：** ###

color : \#999999; /\*文字颜色\*/  
font-family : 宋体,sans-serif; /\*文字字体\*/   
font-size : 9pt; /\*文字大小\*/   
font-style:itelic; /\*文字斜体\*/   
font-variant:small-caps; /\*小字体\*/   
letter-spacing : 1pt; /\*字间距离\*/   
line-height : 200%; /\*设置行高\*/   
font-weight:bold; /\*文字粗体\*/   
vertical-align:sub; /\*下标字\*/   
vertical-align:super; /\*上标字\*/   
text-decoration:line-through; /\*加删除线\*/   
text-decoration: overline; /\*加顶线\*/   
text-decoration:underline; /\*加下划线\*/   
text-decoration:none; /\*删除链接下划线\*/   
text-transform : capitalize; /\*首字大写\*/   
text-transform : uppercase; /\*英文大写\*/   
text-transform : lowercase; /\*英文小写\*/   
text-align:right; /\*文字右对齐\*/   
text-align:left; /\*文字左对齐\*/   
text-align:center; /\*文字居中对齐\*/   
text-align:justify; /\*文字分散对齐\*/   
vertical-align属性  
vertical-align:top; /\*垂直向上对齐\*/   
vertical-align:bottom; /\*垂直向下对齐\*/   
vertical-align:middle; /\*垂直居中对齐\*/   
vertical-align:text-top; /\*文字垂直向上对齐\*/   
vertical-align:text-bottom; /\*文字垂直向下对齐\*/

### **二、CSS衬距空白** ###

padding-top:10px; /\*上边框留空白\*/   
padding-right:10px; /\*右边框留空白\*/   
padding-bottom:10px; /\*下边框留空白\*/   
padding-left:10px; /\*左边框留空白

### **三、CSS符号属性：** ###

list-style-type:none; /\*不编号\*/   
list-style-type:decimal; /\*阿拉伯数字\*/   
list-style-type:lower-roman; /\*小写罗马数字\*/   
list-style-type:upper-roman; /\*大写罗马数字\*/   
list-style-type:lower-alpha; /\*小写英文字母\*/   
list-style-type:upper-alpha; /\*大写英文字母\*/   
list-style-type:disc; /\*实心圆形符号\*/   
list-style-type:circle; /\*空心圆形符号\*/   
list-style-type:square; /\*实心方形符号\*/   
list-style-image:url(/dot.gif); /\*图片式符号\*/   
list-style-; /\*凸排\*/   
list-style-; /\*缩进\*/

### **四、CSS背景样式：** ###

background-color:\#F5E2EC; /\*背景颜色\*/   
background:transparent; /\*透视背景\*/   
background-image : url(/image/bg.gif); /\*背景图片\*/   
background-attachment : fixed; /\*浮水印固定背景\*/   
background-repeat : repeat; /\*重复排列-网页默认\*/   
background-repeat : no-repeat; /\*不重复排列\*/   
background-repeat : repeat-x; /\*在x轴重复排列\*/   
background-repeat : repeat-y; /\*在y轴重复排列\*/   
指定背景位置  
background- 90%; /\*背景图片x与y轴的位置\*/   
background-; /\*向上对齐\*/   
background-; /\*向下对齐\*/   
background-; /\*向左对齐\*/   
background-; /\*向右对齐\*/   
background-; /\*居中对齐\*/

### **五、CSS超连接属性：** ###

a /\*所有超链接\*/   
a:link /\*超链接文字格式\*/   
a:visited /\*浏览过的链接文字格式\*/   
a:active /\*按下链接的格式\*/   
a:hover /\*鼠标转到链接\*/   
鼠标光标样式：  
链接手指 CURSOR: hand   
十字体 cursor:crosshair   
箭头朝下 cursor:s-resize   
十字箭头 cursor:move   
箭头朝右 cursor:move   
加一问号 cursor:help   
箭头朝左 cursor:w-resize   
箭头朝上 cursor:n-resize   
箭头朝右上 cursor:ne-resize   
箭头朝左上 cursor:nw-resize   
文字I型 cursor:text   
箭头斜右下 cursor:se-resize   
箭头斜左下 cursor:sw-resize   
漏斗 cursor:wait   
光标图案(IE6) p \{cursor:url("光标文件名.cur"),text;\}

### **六、CSS框线一览表：** ###

border-top : 1px dotted \#6699cc; /\*上框线\*/   
border-bottom : 1px solid \#6699cc; /\*下框线\*/   
border-left : 1px solid \#6699cc; /\*左框线\*/   
border-right : 1px solid \#6699cc; /\*右框线\*/   
以上是建议书写方式,但也可以使用常规的方式 如下:  
border-top-color : \#369 /\*设置上框线top颜色\*/   
border-top-width :1px /\*设置上框线top宽度\*/   
border-top-style : solid/\*设置上框线top样式\*/   
其他框线样式  
solid /\*实线框\*/   
dotted /\*虚线框\*/   
double /\*双线框\*/   
groove /\*立体内凸框\*/   
ridge /\*立体浮雕框\*/   
inset /\*凹框\*/   
outset /\*凸框\*/

### **七、CSS边距样式：** ###

margin-top:10px; /\*上边界\*/   
margin-right:10px; /\*右边界值\*/   
margin-bottom:10px; /\*下边界值\*/   
margin-left:10px; /\*左边界值\*/   
  
字体样式(Font Style)   
序号 中文说明 标记语法   
1 字体样式 \{font:font-style font-variant font-weight font-size font-family\}   
2 字体类型 \{font-family:"字体1","字体2","字体3",...\}   
3 字体大小 \{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small\}   
4 字体风格 \{font-style:inherit|italic|normal|oblique\}   
5 字体粗细 \{font-weight:100-900|bold|bolder|lighter|normal;\}   
6 字体颜色 \{color:数值;\}   
7 阴影颜色 \{text-shadow:16位色值\}   
8 字体行高 \{line-height:数值|inherit|normal;\}   
9 字 间 距 \{letter-spacing:数值|inherit|normal\}   
10 单词间距 \{word-spacing:数值|inherit|normal\}   
11 字体变形 \{font-variant:inherit|normal|small-cps \}   
12 英文转换 \{text-transform:inherit|none|capitalize|uppercase|lowercase\}   
13 字体变形 \{font-size-adjust:inherit|none\}   
14 字体 \{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider\}

### **八、段落文本样式(Text Style)**  ###

序号 中文说明 标记语法   
1 行 间 距 \{line-height:数值|inherit|normal;\}   
2 文本修饰 \{text-decoration:inherit|none|underline|overline|line-through|blink\}   
3 段首空格 \{text-indent:数值|inherit\}   
4 水平对齐 \{text-align:left|right|center|justify\}   
5 垂直对齐 \{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super\}   
6 书写方式 \{writing-mode:lr-tb|tb-rl\}

### **九、框架样式(Box Style)**  ###

序号 中文说明 标记语法   
1 边界留白 \{margin:margin-top margin-right margin-bottom margin-left\}   
2 补　　白 \{padding:padding-top padding-right padding-bottom padding-left\}   
3 边框宽度 \{border-width:border-top-width border-right-width border-bottom-width border-left-width\}   
宽度值： thin|medium|thick|数值   
4 边框颜色 \{border-color:数值 数值 数值 数值\}　　数值：分别代表top、right、bottom、left颜色值   
5 边框风格 \{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove\}   
6 边　　框 \{border:border-width border-style color\}   
 上 边 框 \{border-top:border-top-width border-style color\}   
 右 边 框 \{border-right:border-right-width border-style color\}   
 下 边 框 \{border-bottom:border-bottom-width border-style color\}   
 左 边 框 \{border-left:border-left-width border-style color\}   
7 宽　　度 \{width:长度|百分比| auto\}   
8 高　　度 \{height:数值|auto\}   
9 漂　　浮 \{float:left|right|none\}   
10 清　　除 \{clear:none|left|right|both\}