一 CSS（Cascading Style Sheets）级联样式表，作用：装饰HTML
二 CSS语法由三部分构成：选择器，属性，值。
三 HTML引用CSS的三种方法（以下为示例代码）
HTML CODE
<!DOCTYP>
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div{
background-color:#FF0000;
}
@import "test2.css";
</style>
<link rel="stylesheet" type="text/css" href="test.css"></link>
</HEAD>
<BODY>
<P style="background-color:yellow">这个是行内样式表</p><br><hr>
<div >这个是内部样式表</div><br><hr>
<span>这个是使用了test.css中的外部样式</span><br><hr>
<a href="#">这个是使用import(test2.css的样式)外部样式</a>
</BODY>
</HTML>
CSS CODE
test.css
span{
background-color:#FF0000;
}
test2.css
a{
background-color:#FF0000;
}
网上转载：DIV+CSS 常用属性
字体属性：
1.font-size:12px; 字体大小
2.font-weight:bold; 字体加粗
3.font-family:"宋体"; 字体的种类
背景属性：
1.background-color:#000; 背景颜色 简写：background:#00;
2.background-image:url("图片路径"); 设置背景图片
简写：background:url("图片路径");
3.background-repeat:repeat-x/repeat-y/no-repeat; 图象平铺
注：可以简写background:背景颜色/背景图片/背景平铺
文本属性：
1.letter-spacing:12px/normal;字间隔 normal 无
2.line-height:25px; 行高
3.text-indent:24px; 文本缩进
方框属性：
1.border:1px solid #000; 边框
2.border-top/left/right/bottom:1px solid/dashed #000; 设置上左右下边框
solid :实线 dashed：虑线
3.display:block; 转块元素
displya:inline;转行内元素
定位：
position:absolute; 绝对定位
position:relative; 相对定位
margin:0 auto;居中
margin 边距
margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;
padding 内边距
padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;
list-style:none;
float:left/right；css浮动
cursor:pointe;鼠标为手型
clear:both;清除浮动
css简写
font
简写：
font:italic small-caps bold 12px/1.5em arial,verdana;等效于：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）
background
简写：
background:#fff url(bg.gif) no-repeat fixed left top;等效于：
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;顺序：background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写：
margin:1px 0 2em -20px;等效于：
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;顺序：margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写：
border:1px solid #000;等效于：
border-width:1px;
border-style:solid;
border-color:#000;顺序：border-width | border-style | border-color
这三句也是简写，等于是把四边的样式合而为一了。（关于四边的问题，下文有详细说明）
border-top / border-right / border-bottom / border-left
简写：
border-top:1px solid #000;等效于：
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;（和border一样）
list-style
简写：
list-style:square outside url(bullet.gif);等效于：
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);顺序：list-style-type | list-style-position | list-style-image
分享到：
相关推荐
外部样式表是最推荐的方式，它将CSS代码保存在单独的`.css`文件中，然后在HTML文档中通过`<link>`标签引用。例如： ```html <!DOCTYPE html> <meta charset="UTF-8"> 外部样式表示例 ...
CSS有三种使用方式：行内样式、内部样式表和外部样式表。通过选择器与属性的组合，可以精确地指定元素的样式。CSS3新增了更多的选择器、过渡效果、动画、多列布局、Flexbox和Grid布局等，大大增强了网页设计的灵活性...
CSS样式表可以分为三种：内嵌样式表、行内样式表和外部样式表。 内嵌样式表 内嵌样式表是将样式表直接嵌入到HTML文档的HEAD部分中。 例如： ``` <STYLE type="text/css"> /*样式规则*/ ``` 行内样式表 ...
3. 外部样式表（外链式）：将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。 - 基本语法格式： `<head> <link rel="stylesheet" type= "text/css" ...
优先级规则是：行内样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。 **二、选择器的种类** 1. **基本选择器**：包括标签选择器（如`p`）、类选择器（`.class`）、ID选择器（`#id`）和通配符选择器（`*`）。 2...
行内样式通过`style`属性直接在HTML元素中定义，内部样式表通常放在`<head>`标签内的`<style>`标签中，而外部样式表则以`.css`文件形式存储，通过`<link>`标签引入到HTML文档。 ```html <!-- 行内样式 --> ;">这是...
2. 扩充HTML标记：通过CSS，我们能够为HTML元素添加更多的样式，这些样式可以通过外部样式表来定义和管理，增加了HTML的表现力。 3. 提高网站维护效率：使用CSS可以减少代码冗余，使得网站的维护工作更加高效。 4....
3. **外部样式**：创建单独的`.css`文件，然后在HTML文档中通过`<link>`标签引用，实现样式表的复用和页面间的样式共享。 DHTML（Dynamic HTML）是动态HTML的简称，它是HTML、JavaScript和CSS结合的一种技术，允许...
1. **CSS基本概念**：介绍CSS的起源、作用以及与HTML的关系，解释如何通过内部样式、外部样式表和行内样式来应用CSS。 2. **选择器和规则集**：详细讲解各类选择器，包括元素选择器、类选择器、ID选择器、伪类和伪...
* 外部样式表（外链式）：将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中 四、CSS样式规则 * 选择器用于指定CSS样式作用的HTML标签 * 属性和属性值以“键值对”的形式出现 * 属性是对指定的对象设置...
- **外部样式表**：通过`<link>`标签引用外部.css文件，可复用且便于管理。 3. **CSS滤镜** - **滤镜效果**：允许对元素应用视觉效果，如模糊、颜色转换等。在CSS中，滤镜通常用于图片或背景。 - **CSS3滤镜**：...
本文将详细介绍如何使用CSS来美化HTML文档，并重点探讨三种应用CSS的方式：行内样式表、内部样式表以及外部样式表。 #### 二、行内样式表（Style属性） **定义：** 行内样式表是指直接在HTML元素中使用`style`属性...
- 层叠性：CSS的“级联”特性意味着样式可以来自多个源，如内联样式、内部样式表和外部样式表。层叠规则确定最终应用的样式。 - 优先级：!important、行内样式、ID选择器、类选择器、标签选择器等不同级别的优先级...
**CSS样式表的应用** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将样式信息与网页内容分离，使得网页的设计和维护更为灵活高效。...
优先级通常由样式来源决定，如内联样式、内部样式表和外部样式表。 3. **盒模型**：CSS中的每个元素都可视为一个矩形盒子，包含边距（margin）、边框（border）、填充（padding）和实际内容（content）。理解盒模型...
2. **外部样式表**：创建一个`.css`文件，然后在HTML文档中通过`<link>`标签引用它。 3. **行内样式**：直接在HTML元素的`style`属性中写入CSS代码，这种方式优先级最高。 **CSS选择器** CSS选择器有多种，包括...
4. 层叠规则：CSS遵循“就近原则”和“特异性”来决定样式的优先级，以及外部样式表、内部样式表和内联样式的权重。 5. 浮动和定位：浮动（float）常用于创建多列布局，定位（position）则可精确控制元素的位置，...
- **链接**：通过`<link>`标签链接外部样式表，如`<link rel="stylesheet" type="text/css" href="styles.css">` ### 5. **常用的CSS属性** - **文本属性**：包括`font-size`、`font-family`、`font-style`、`color...