CSS样式精选详解笔记
CSS超全笔记（适合新手入门）
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
css相关笔记
以下是一份关于CSS的笔记，涵盖了基础概念、属性和布局技巧等方面：一、基础概念CSS是层叠式样式表的简称，也称为级联样式表或样式表。
它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
CSS文件的后缀是.css，通常在HTML文档中嵌入或链接到外部CSS文件。
CSS不区分大小写，建议小写。
CSS具有层叠性，一个元素可以设置多个样式。
当样式冲突时，优先级高的样式生效；优先级相同时，写在后面的样式生效。
二、CSS属性和布局技巧文本样式：可以使用CSS设置文本的颜色、字体、大小、对齐方式等。
例如，color属性用于设置文本颜色，font-family属性用于设置字体，font-size属性用于设置字体大小，text-align属性用于设置文本对齐方式。
图片样式：可以使用CSS设置图片的宽度、高度、边框、边距等。
例如，width和height属性用于设置图片宽度和高度，border属性用于设置图片边框，margin和padding属性用于设置图片边距。
布局技巧：CSS提供了多种布局技巧，如浮动布局、定位布局、弹性布局等。
其中，浮动布局是最常用的布局方式之一，通过float属性可以让元素左右浮动；定位布局通过position属性可以实现元素的定位；弹性布局则是一种更灵活的布局方式，通过flexbox或grid属性可以实现元素的灵活布局。
三、CSS选择器CSS选择器是用于选择HTML元素的一种语法。
常用的选择器有元素选择器、类选择器、ID选择器等。
例如，p选择器可以选择所有的段落元素，.myClass选择器可以选择所有类名为myClass的元素，#myID选择器可以选择ID为myID的元素。
四、CSS的引入方式内联样式：在HTML标签内使用style属性直接定义CSS代码。
这种方式的优点是方便快捷，但只对当前元素生效。
内部样式表：在HTML文档的<head>部分使用<style>标签定义CSS代码。
css样式大全精华版
字体属性：(font)大小{font-size: *-large;}(特大) **-small;(极小) 一般中文用不到，只要用数值就可以，单位：P*、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：P*、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{te*t-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{te*t-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: *FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fi*ed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:*000 url(..) repeat fi*ed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{te*t-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{te*t-indent: 数值p*;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; te*t-top; middle; bottom; te*t-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保存) nowrap;(不换行)显示{display:block;}(块) inline;(嵌) list-item;(列表项) run-in;(追加局部) pact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group;table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Bo*)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:*;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字)lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12p*,auto,12p*,auto) (裁切)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; /*上标字*/te*t-decoration:line-through; /*加删除线*/te*t-decoration: overline; /*加顶线*/te*t-decoration:underline; /*加下划线*/te*t-decoration:none; /*删除下划线*/te*t-transform : capitalize; /*首字大写*/te*t-transform : uppercase; /*英文大写*/te*t-transform : lowercase; /*英文小写*/te*t-align:right; /*文字右对齐*/te*t-align:left; /*文字左对齐*/te*t-align:center; /*文字居中对齐*/te*t-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:te*t-top; /*文字垂直向上对齐*/ vertical-align:te*t-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10p*; /*上边框留空白*/padding-right:10p*; /*右边框留空白*/padding-bottom:10p*; /*下边框留空白*/ padding-left:10p*; /*左边框留空白三、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-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:*F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fi*ed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-*; /*在*轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片*与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、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:te*t箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),te*t;} 六、CSS框线一览表：border-top : 1p* solid *6699cc; /*上框线*/ border-bottom : 1p* solid *6699cc; /*下框线*/ border-left : 1p* solid *6699cc; /*左框线*/ border-right : 1p* solid *6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : *369 /*设置上框线top颜色*/ border-top-width :1p* /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单项选择项1选项2八、CSS边界样式：margin-top:10p*; /*上边界*/margin-right:10p*; /*右边界值*/margin-bottom:10p*; /*下边界值*/margin-left:10p*; /*左边界值*/CSS 属性：字体样式(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| *-large| **-large| small| smaller| *-small| **-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{te*t-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 英文转换{te*t-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}{font-stretch:condensed|e*panded|e*tra-condensed|e*tra-e*panded|inherit|nar rower|normal|semi-condensed|semi-e*panded|ultra-condensed|ultra-e*panded|wider}文本样式(Te*t Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{te*t-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{te*t-indent:数值|inherit}4 水平对齐{te*t-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|te*t-top|te*t-bottom|baseline|middle|sub|s uper}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-*|repeat-y}4 背景固定{background-attachment:fi*ed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景|背景位置}框架样式(Bo* 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-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}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}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-al pha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|te*t|wait|move|help|e-resize|nw-resize|w-resize|s-res ize|se-resize|sw-resize}。
css知识点
css知识点CSS（层叠样式表）是一种用于设计网页外观的标记语言。
它是网页开发者常用的一项技能，掌握了CSS知识，我们可以更好地控制网页的布局和样式。
在本文中，我将介绍一些重要的CSS知识点，帮助大家更好地理解和运用这项技术。
盒模型是CSS中的一个重要概念。
每个HTML元素都可以被看作一个矩形的盒子，这个盒子由内容、内边距、边框和外边距组成。
内容是元素中实际显示的部分，内边距是内容和边框之间的空间，边框是包围内容和内边距的线条，外边距则是盒子与其他元素之间的距离。
理解盒模型有助于我们更好地进行布局和样式的控制。
定位是CSS中常用的一种布局技术。
有三种常见的定位方式：静态定位、相对定位和绝对定位。
静态定位是元素的默认定位方式，元素按照正常的文档流进行排列。
相对定位允许我们通过top、bottom、left、right属性来调整元素的位置，相对于它在文档流中的原始位置。
绝对定位则是相对于最近的已定位祖先元素进行定位，或者相对于整个页面进行定位。
通过这些定位方式，我们可以更灵活地控制元素的布局。
选择器是CSS中用于选择要样式化的元素的方式。
有多种选择器可供选择，每个选择器都有不同的用途。
常见的选择器有标签选择器、类选择器、ID选择器和层级选择器等。
标签选择器通过选择HTML元素标签来选中元素，类选择器通过选择元素的class属性来选中元素，ID选择器则是通过选择元素的id属性来选中元素。
层级选择器允许我们通过元素之间的父子关系来选择元素。
选择器的使用让我们可以有针对性地为元素添加样式。
CSS还提供了丰富的样式属性，可以用来调整元素的外观。
例如，我们可以使用背景属性来设置元素的背景色或者背景图片。
我们可以使用字体属性来设置元素的字体样式，包括字体种类、字号和字重等。
边框属性则可以用来设置元素的边框样式，包括边框的宽度、样式和颜色等。
通过这些样式属性的组合和调整，我们可以创建出各种各样的视觉效果。
除了上述的知识点外，CSS还有许多其他的特性和技巧。
CSS学习记录——三种样式表
内联样式表和内部样式表：
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>内联样式表</title> <!-- 也可以将CSS样式写道head的style标签里 -->
外部样式表：
<!-- 将样式表编写到外部CSS的文件中，然后通过link标签来将外部的CSS文件引入到当前页面中 这样外部的css样式表会应用到当前页面
--> <!DOCTYPE html> <html> <head>
<meta charset="UTF-8"> <title>外部样式表！</title> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- rel和ytpe为固定值；href为相对路径 --> </head> <body> <p>外部样式表！</p> <!-- 将css样式统一编写到外部样式表中，完全使结构和样式分离，
<style type="text/css"> /* 这里是内部样式表 */
p{ /* 这，是一个选择器 */ color: red; font-size: 90px;
amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css（常⽤组件6）--图标Icon amazeui学习笔记--css（常⽤组件6）--图标Icon ⼀、总结1、关注⽤法即可：在 HTML 上添加添加am-icon-{图标名称} class。
<span class="am-icon-weixin"> Wechat</span>2、图标⼤⼩：.am-icon-sm，放⼤ 150%.am-icon-md，放⼤ 200%.am-icon-lg，放⼤ 250%3、icon button：在 Icon 上添加.am-icon-btn class。
<a href="##" class="am-icon-btn am-icon-twitter"></a>4、旋转动画：注意：Chrome 和 Firefox 下，display: inline-block;或display: block;的元素才会应⽤旋转动画。
<i class="am-icon-spinner am-icon-spin"></i>5、固定宽度（⾮常有⽤）：FontAwesome 在绘制图标的时候不同图标宽度有差异，添加.am-icon-fw将图标设置为固定的宽度，解决宽度不⼀致问题（v2.3 新增）。
<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>6、图标不⽀持的情况可以直接写编码形式：<span> What a fuck.</span>⼆、图标IconIcon⽬录Amaze UI Icon 组件⽬前使⽤了（Amaze UI 2.2.0 中升级⾄ 4.3.0），涵盖除部分国内社交⽹站图标以外的其他常见图标。
CSS学习笔记-边框(border)
第12节 CSS Border(边框）12.1边框样式边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式可以设置的值:none: 默认无边框dotted:点线边框dashed:虚线边框solid:实线边框double: 双线边框groove: 3D沟槽边框ridge: 3D脊边框;inset: 3D嵌入边框。
12.2边框宽度border-width 属性为边框指定宽度。
可以设置的值:可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为border-color属性用于设置边框的颜色。
可以设置的值:name - 指定颜色的名称，如 "red"RGB - 指定 RGB 值, 如 "rgb(255,0,0)"Hex - 指定16进制值, 如 "#ff0000"12.4四个边框四个边框分别对应四个属性值：border-left左边框border-right右边框border-top上边框border-bottom下边框12.5每个边框上、右、下、左四个边框中，每个边框分别对应三个属性，比如对于上边框有：border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
12.6使用方法[border].c{border-width:5px;border-style:solid; /*这个属性是必须的*/border-color:red;}也可以写为：.c{border:5px solid red;}12.7使用方法[border-style]-四个参数“上、右、下、左”.d{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: dashed;}也可以写为：.d{border-style:dotted solid double dashed;}12.8使用方法[border-style]-三个参数“上、左右、下”{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: solid;}也可以写为：.e{border-style:dotted solid double;}12.9使用方法[border-style]-两个参数“上下、左右”.f{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style: solid;}也可以写为：.f{border-style:dotted solid;}12.9使用方法[border-style]-一个参数“上右下左”.g{border-top-style:dotted;border-right-style: dotted;border-bottom-style:dotted;border-left-style: dotted;}也可以写为：.g{border-style:dotted;}12.9使用方法[其他]类似的用法。
css相关笔记
css相关笔记【原创实用版】目录1.CSS 概述2.CSS 的基本语法3.CSS 选择器4.CSS 的盒模型5.CSS 的布局6.CSS 的样式7.CSS 的动画正文CSS，全称层叠样式表（Cascading Style Sheets），是一种用于描述HTML 或 XML 文档样式的样式表语言。
它是一种用来控制网页样式和布局的语言，使得网页开发者能够轻松地为网页设置字体、颜色、大小、间距、边框等样式。
CSS 的基本语法非常简单，主要由选择器（selector）、属性（property）和值（value）三部分组成。
例如：“p {color: red;}”，其中，“p”是选择器，表示所有段落元素；“color”是属性，表示文字颜色；“red”是值，表示文字颜色为红色。
CSS 选择器是 CSS 的核心功能之一，它可以用来选择需要应用样式的 HTML 元素。
CSS 选择器有很多种，包括标签选择器、类选择器、ID 选择器等。
例如，“p”是标签选择器，表示所有段落元素；“.classname”是类选择器，表示所有具有指定类名的元素；”#idname”是 ID 选择器，表示具有指定 ID 的元素。
CSS 的盒模型是 CSS 中一个重要的概念，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
开发者可以通过设置这四个部分的样式，来控制元素在页面上的布局和显示效果。
CSS 的布局方式有很多种，包括浮动（float）、定位（position）、弹性盒子（flexbox）等。
开发者可以根据页面的需求，选择合适的布局方式。
CSS 的样式包括字体、颜色、大小、间距、边框等，开发者可以通过设置这些样式，来控制页面的显示效果。
CSS 的动画是一种可以让页面元素产生动态效果的技术，包括过渡（transition）、变换（transform）和动画（animation）等。
css学习笔记
1-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
提示：属性名和属性值成对出现→键值对。
02-CSS引入方式•内部样式表：学习使用o CSS 代码写在 style 标签里面•外部样式表：开发使用o CSS 代码写在单独的 CSS 文件中（.css）o在 HTML 使用 link 标签引入•行内样式：配合 JavaScript 使用o CSS 写在标签的 style 属性值里03-选择器作用：查找标签，设置样式。
标签选择器标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式。
例如：p, h1, div, a, img......注意：标签选择器无法差异化同名标签的显示效果。
类选择器作用：查找标签，差异化设置标签的显示效果。
步骤：•定义类选择器→.类名•使用类选择器→标签添加class="类名"注意：•类名自定义，不要用纯数字或中文，尽量用英文命名•一个类选择器可以供多个标签使用•一个标签可以使用多个类名，类名之间用空格隔开开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。
id选择器作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript使用，很少用来设置 CSS 样式步骤：•定义 id 选择器→ #id名•使用 id 选择器→标签添加 id= "id名"规则：同一个 id 选择器在一个页面只能使用一次。
通配符选择器作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。
css详解2
css详解21、伪类选择器1.1、a标签的爱恨准则 LoVe HAte 。
⼀个冒号连接1.2、a标签的⽰例给a标签设置个颜⾊，⽣效了<html lang="en"><head><meta charset="UTF-8"><style>a{color: red}</style></head><body><a href="#">百度⼀下</a></body></html>给body设置个颜⾊，在body中的a标签会继承这个颜⾊吗？<style>body{color: red}</style>没有继承，a标签内部有⾃⼰的默认样式所以：对于a标签，如果想设置a标签的样式，要作⽤于a标签上，对于继承性来说，a标签不起作⽤的1.3、伪类选择器使⽤案例<html lang="en"><head><meta charset="UTF-8"><style>/*LoVe HAte*//*a标签没有被访问时候设置的属性*/a:link{color: red;}/*a标签被访问时候设置的属性*/a:visited{color:yellow;}/*a标签悬浮时设置的属性*/a:hover{color: deeppink;}/*a标签被摁住的时候设置的属性*/a:active{color: deepskyblue;}</style></head><body><a href="#1">百度⼀下</a><a href="#2">360⼀下</a><a href="#3">搜狗⼀下</a><a href="#4">过河⼀下</a></body></html>1.4其它也可以使⽤伪类选择器hover。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS 样式精选详解 分解1 2 3 4 5 基础、字体和文本 盒模型 Box Model 浮动与定位 颜色、背景、表格和列表 伪类和 CSS Hack 金翼 张江 王锦博 高海建 陈玮玮 基础Web 标准 网页由四部分组成： 内容 （Content） 、 结构 （Structure） 、 表现 （Presentation） 和行为 （Behavior） 。
内容，没有标准。
结构化标准语言，主要包括 XHTML 和 XML。
表现标准语言，主要是 CSS（Cascading Style Sheets） 。
行为标准语言，主要包括对象模型。
从 HTML 到 XHTML XHTML 是基于 HTML 的，他是更严密、代码更整洁的 HTML 版本。
两者最大区别有以下几个 方面： 选择 DTD 定义文档类型。
HTMLStrict ： 严 格 的，不能使用 任何表现层的 标识和属性。
XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-stric t.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-tran sitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " /TR/html4/strict.dtd" >Transitional ： 过渡的，要求 非常宽松，允 许 XHMLT 继续 使用 HTML 的 标识，但要符 合 XHTML 的 写法。
Frameset ： 框 架的，专门针 对框架页面设 计的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " /TR/html4/loose.dtd" ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " /TR/html4/frameset.d td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "/TR/xhtml1/DTD/xhtml1-fram eset.dtd">定义语言编码：所有的 XHTML 文档都必须声明使用的语言编码。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> XHTML 元素一定要有正确的组织结构，被正确地嵌套使用，所有的 XHTML 标签一定要 关闭。
<html>、<head>、<body>元素必须出现，并且<tite>必须在<head>里。
标签名字要用小写字母：因为 XHTML 文档是 XML 的一种，而 XML 对大小写敏感。
错误 <BODY> <P>…</P> </BODY> <body> <p>…</p> </body> 正确属性名字必须小写，属性值必须带上英文双引号，属性的简写被禁止。
错误 正确 <table width=”100%” >…</table> XHTML checked = “checked” disabled = “disabled” selected = “selected”<table WIDTH=100%>…</table> HTML checked disabled selected 用 id 属性代替 name 属性：HTML4.01 中为<a>、<applet>、<form>、<frame>、<iframe>、 <img>、<map>定义了一个 name 属性，在 XHTML 里，除了<form>和<a>以外，name 属 性都不能使用，用 id 来替换。
标签的分类 可替换元素 不可替换元素<img><input><object>等， 浏览器根据元素的 (X)HTML 的大多数元素是不可替换元素。
标签和属性，来决定元素的具体显示内容。
块级元素 行内元素在视觉上被格式化为块的元素， 明显的特征 不形成新内容块，在其左右可以有其他元 是他默认在横向充满其父元素的内容区域。
素，比如<img><input>等。
<div><p><table>等。
常用标签和属性 其他从略。
table：caption、thead、tbody、tfoot。
(X)HTML 各个元素对搜索引擎的权重比例 内部链接文字 <head>内的<title>元素 域名 10 分 10 分 7分<h1><h2>标题 每段句首 路径或者文件名 每句开头 加粗或斜体 title 属性 alt 属性 meta 描述5分 5分 4分 1.5 分 1分 1分 0.5 分 0.05 – 0.5 分层叠样式表 CSS：简称样式表，是一种标记性语言。
行内式样式 嵌入式样式 <p style=”color:blue”>…</p> <html> <head> <style type=”text/css” media=”all”> p{color:blue} </style> </head> …… </html> <html> <head> <link rel=”stylesheet ”href=”basic.css” type=”text/css” media=”all”> </head> …… </html> <html> <head> <style type=”text/css”> @import url(basic.css); </style> </head> …… </html> 不推荐 不推荐 style 标签必 须使用 type 属性！外部样式表推荐导入式样式表不推荐media 属性。
media 属性为可选属性，用于指定样式表被接受的介质或媒体。
screen（默认值） print 用于屏幕媒体的呈现，如显示器。
用于不透明的页面材料，以及文档在打印预览的状态。
projection、speech、braille、embossed、handheld、tty、tv all 所有输出设备。
基本语法。
样式规则有“选择器(selector)”和“声明(declaration)”组成，而声明又由“属性(property)”和“值(value)”组成。
选择器 属性 值p {color:blue;}在英文大括号“{}”中的是声明，属性和值用英文冒号“:”分割。
继承 元素可以从父元素那里继承部分样式规则。
不过，有些属 性是不被继承的，比如背景色、边框、边距(margin)、补白 (padding)等。
CSS 中对于相同的选择器可以重复定义规则， 以最后定义的 为准，这就是“层叠”的含义。
h2,h3,p,ul{color:blue;} p{font-size:1em;color:blue;} p{ padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:10px; } 等同于 p{padding:5px 4px 3px 10px} 在 CSS 中，空格是有效的，多个空格会被缩略为 1 个。
CSS 本身对大小写不敏感，由于 XHTML 区分大小写，选择 器的定义应与标签一致。
p{text-corlor:red;font-size:12p;}层叠 分组 缩写 CSS 的缩写 颜色的缩写 0px 与 0 无论什么单位，0 就是 0，因 此，0px=0pt=0in=0。
空格 大小写敏感 容错 选择器。
通配选择器。
类型选择器：以文档语言元 素类型作为选择器，即以 (X)HTML 标签作为选择器。
ID 选择器：以(X)HTML 标签 的 id 属性作为选择器。
类选择器： 以(X)HTML 标签的 class 属性作为选择器。
类选择器非常灵活，同一元 素可以设定多个类来决定如 何显示。
包含选择器：也称“后代选 择器” ，运作原理是建立在文 档结构树的基础上。
* {margin:0;} div * {padding:0;} body {color:blue;} p {background-color:gray;} #six {color:red} <p id=”six”>….</p> .warning{color:red;} .bg{background-color:black;} <div id=”five” class=”warningbg ”>….</div>div p {color:green;padding:10px;} div em {color:red;padding:10px;} .four a {color:blue;} <div class=”four ”><p>这里是段落 <em>em</em> <a href=”#”>这里是超链接</a> </p> </div> 子元素选择器：与包含选择 器很像，区别在于只对元素 的子元素生效，而不影响其 他后代。