CSS层叠样式表思维导图
CSS基础语法与样式内容讲解
树图思维导图提供 CSS层叠样式表 在线思维导图免费制作，点击“编辑”按钮，可对 CSS层叠样式表 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：d6c279c47e937d2b656601c1e1ef2a31
思维导图大纲
CSS层叠样式表思维导图模板大纲
css简介
HTML负责网页内的基础内容，而CSS负责让网页美观
CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局 网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样 式，设置边框的样式，调整模块的间距等。
CSS作用：简单来说：就是通过编码方式，对Html页面的各种标签元素进行样式控制。
CSS样式
背景相关样式
background-color：设置背景色
background-image：设置背景图片
background-position：设置背景图片的起始位置，背景图像如果要重复，将从这一点开始
background-position:bottom center;
background-repeat：设置背景图片是否及如何重复
/* 背景图片重复方式及是否重复 no-repeat：不能重复 repeat-x：横向重复 repeat-y：竖向重复*/ background-repeat: no-repeat;
background-size：设置背景图片的尺寸
/* 背景图片大小 */ /* background-size: 800px 500px; */ background-size: 50% 50%;
background-attachment：设置背景图片是固定还是随着页面的其余部分滚动
/* background-attachment: scroll; */ background-attachment: fixed;
background: 简写属性，将上面列出的背景相关的多个属性设置在一个声明中（推荐）。
background: yellow url(1.jpg) bottom center no-repeat scroll;
文本相关样式
文本缩进 text-indent
#css_text{ text-indent: 100px; }
水平对齐 text-align
/* left：水平左对齐 right：水平右对齐 center：水平居中对齐 */ text-align: center;
行高 line-height 当块元素中只有一行文本时，将行高设置为容器的高度，可实现垂直方向上的居中
line-height: 100px;
词间隔 word-spacing
/* 词间隔，词语之间需要有空格 */ word-spacing: 2em;
字母间隔 letter-spacing
/* 字符间隔，不需要空格 */ letter-spacing: 2em;
大小写转换 text-transform
/* 大小写转化 lowercase：大写转小写 uppercase：小写转大写*/ text-transform: lowercase;
文本装饰 text-decoration
/* 文本装饰 line-through：定义穿过文本的一条线。overline：定义文本上的一条 线 underline：定义文本下的一条线*/ text-decoration: line-through;
空白处理 white-space
/* 空白处理 nowrap：禁止换行*/ white-space: nowrap;
文本阴影 text-shadow
/* 文本阴影 x距离,y距离,模糊,颜色*/ text-shadow: 2px 2px 8px red;
字体相关样式
设置字体 font-family
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
字体大小 font-size
font-size: 40px;
字体粗细 font-weight
font-weight: 900;
字体风格 font-style
/*italic：斜体*/ font-style: italic;
尺寸相关样式
设置宽度 width 设置高度 height
width: 500px; height: 100px;
设置最大宽度 max-width 设置最大高度 max-height
max-width: 300px; max-height: 100px;
设置最小宽度 min-width 设置最小高度 min-height
min-width: 50px; min-height: 20px;
设置的宽高最小不能小于min，最大不能大于max
链接相关样式
我们可以通过伪类选择器来设置超链接不同状态的样式 链接的四种状态（本质上其实就是给a标签设置伪类选择器）： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
/* 超链接没有被点击访问时的样式 */ a:link{ color: antiquewhite; text-decoration: none; /*去除下划线*/ }
/* 鼠标悬停在超链接上时的样式 */ a:hover{ color: red; }
/*链接被点击时的样式*/ a:active{ color: green; }
/* 链接被访问之后的样式 */ a:visited{ color: gainsboro; }
列表相关样式
列表标记的类型：list-style-type
list-style-type: decimal;
将列表符号设置为图像 list-style-image
list-style-image: url(1.jpg);
表格相关样式
设置边框线宽度 设置边框线颜色 设置边框线样式
table{ border: 1px; border-color: red; border-style: solid; } td{ border: 1px; border-color: red; border-style: solid; }
合并重复边框 border-collapse
border-collapse: collapse;
单元格与内容之间空白的距离 border-spacing
/*设置border-collapse: collapse时失效 */ border-spacing: 10px;
表格标题的位置 caption-side
caption-side: bottom;
上下左右边框样式设置
/* 左边框样式设置 */ border-left: 5px; border-left-color: green; border-left-style: dotted; /* 右边框样式设置 */ border-right: 10px; border-right-color: blue; border-right-style: groove; /* 上边框样式设置 */ border-top: 5px; border-top-color: red; border-top-style: dashed; /* 下边框样式设置 */ border-bottom: 5px; border-bottom-color: yellow; border-bottom-style: solid;
修改元素默认显示行为
我们可以通过给html元素设置display样式来改变其默认的显示行为，display的常用取值如下：
转化为行内元素(内联元素)显示： inline
转化为块级元素显示：block
转化为行内块显示：inline-block
不显示：none
清楚默认样式
不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果 没清除默认的CSS样式往往会出现浏览器之间的页面差异。 每次新开发网站或新网页时候通过初始化CSS样式的属性，可以让用到的CSS或html标签更加方 便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。
html { color: #000; background: #FFF; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; *font-size: 100%; } legend { color: #000; }
CSS基础语法
CSS三种引入方式
内联样式（在标签上定义）
内部样式表（head中定义）
外部样式表（css文档中定义）
三种方式的优先级： 内联样式 > 内部样式表 = 外部样式表(后面两种优先级取决于定义的顺 序，越靠后优先级越高)
CSS语法
选择器：指定将要添加样式的 HTML元素的方式
标签名
class值
id值
声明：形式为属性(property):值(value)
selector{ // 选择器 property1:value1; //声明 property2:value2; property3:value3; }
/* 给h1标签设置前景色为红色，字体大小14像素 */ h1{ color:red; font-size:14px; }
入门案例
设置h1标签内容的颜色 <h1>欢迎来到Css的世界</h1>
<!-- 内联样式 --> <h1 style="color: red;">欢迎来到Css的世界</h1>
<!-- 内部样式 --> <style> h1{ /* color: red; */ /*英文单词写法*/ /* color: #ff0000; */ /*十六进制写法，可以使用缩写#ff00*/ /* color: #ff00; */ /*十六进制缩写写法*/ /* color: rgb(255, 0, 0); */ /*rgb写法，rgb颜色值分为三组， 第一组代表红色、第二组代表绿色、第三组代表蓝色。每一组的取值范围是0 - 255*/ /* color: rgb(100%,0%,0%); */ /*rgb百分比写法*/ color: rgb(100%,0%,0%,.1); /*rgb百分比写法，带透明度*/ } </style>
注意：在使用内部样式时，需要将内联样式去掉，因为内联样式方式的优先级高 于内部样式方式和外部样式方式。
外部样式 在项目的根目录创建css目录，在css目录中创建start.css文档，在文档中设置样式
h1{ /* color: red; */ /*英文单词写法*/ /* color: #ff0000; */ /*十六进制写法，可以使用缩写#ff00*/ /* color: #ff00; */ /*十六进制缩写写法*/ /* color: rgb(255, 0, 0); */ /*rgb写法，rgb颜色值分为三组， 第一 组代表红色、第二组代表绿色、第三组代表蓝色。每一组的取值范围是0 - 255*/ /* color: rgb(100%,0%,0%); */ /*rgb百分比写法*/ color: rgb(100%,0%,0%,.1); /*rgb百分比写法，带透明度*/ }
在html文件的head标签中使用link标签引入外部的css文件
<link type="text/css" rel="stylesheet" href="css/start.css"/
注意：在使用外部的css样式时，需要将之前的内部样式去掉，因为内部样式方式 和外部样式方式的优先级取决于定义顺序，越往后优先级越高。
CSS选择器
基础选择器
通配选择器 可以匹配页面中的所有标签
*{ color: red; }
标签选择器 根据标签名称选中页面中指定的标签
/* margin-left：设置元素的左外边距 */ ul{ margin-left: 40px; } h1{ color: blue; }
ID选择器 根据标签上的ID属性值来选中指定的标签
#css_selector{ color: yellow; }
类选择器 根据标签上的class属性值来选中所有带此class属性的标签
.grey{ color: hotpink; }
属性选择器 属性选择器可以根据标签上所携带的属性来选中标签
/* 如果给同一个标签设置多个相同样式，后设置的会生效 */ /* [属性名]{} 拥有此属性的标签都会设置成对应的样式 */ [my_attr]{ color: orange; } /* [属性名="值"]{} 拥有此属性并且属性的值是对应的值的标签都会设置成对应的样 式 */ [my_attr="anli"]{ color: gainsboro; }
进阶选择器 进阶选择器其实是将多个基础选择器组合到一起使用
后代选择器
selector1 selector2 ...selectorN{ ....... }
#level1 h2{ color: red; }
" "
子代选择器
和后台选择器的区别在于：只选择直接子代元素
selector1>selector2....selectorN{ ....... }
子主题 3
#level1>h3{ color: blue; }
”>"
同级选择器
selector1~selector2...selectorN{ ....... }
选中class="level1_class"的元素后面所有的同级p标签 .level1_class~p{ color: green; }
"~"
相邻兄弟选择器
selector1+selector2...selectorN{ ....... }
使用示例：选中所有class="level2_class"的元素后面紧跟着的同级p标签 .level2_class+p{ background: yellow; }
"+"
伪类选择器
selector:hover{ ....... }
使用示例：当鼠标放到所有的p标签上时，将p标签的样式改变，当鼠标移开时，样 式还原 p:hover { background: lightpink; color: white; }
":"
伪元素(很少)
在selector元素内部的开头或结尾插入一个伪元素
selector:before{ ....... } selector:after{ ....... }
使用示例：在class="level2_class"的元素内部的开头位置和结束位置添加一个伪元素，并且 设置伪元素的内容、文字大小、文字粗度 .level2_class:before{ content: "before伪元素标题"; font-size: 60px; font-weight: bold; } .level2_class:after{ content: "ater伪元素标题"; font-size: 60px; font-weight: bold; }
常用的伪元素有两个： before：在标签的所有内容的前面添加内容。 after：在标签的所有内容的后面添加内容。
选择器分组
可以通过使用英文的逗号","将多个选择器连接到一起，同时给多个符合的元素设置统一的样式 例如：如果您想把很多元素显示为灰色，可以使用类似如下的规则
h6,.level1,#level2{ background: gray; }
选择器优先级
优先级只有在单selector场景中比较才有意义。 优先级排名：
第一名：ID选择器 第二名：属性选择器/类选择器 第三名：标签选择器 第四名：通配选择器
/* 选择器优先级 */ /* id选择器 > 属性选择器=class选择器 > 标签选择器 > 通配符选择器 */ /* 第一 */ #test_id{ color: yellow; } /* 第二 */ [attr="123"]{ color: hotpink; } /* 第二 */ .test_class{ color: blue; } /* 第三 */ span{ color: green; } /* 第四 */ *{ color: red; }
相关思维导图模板
树图思维导图提供 CSS揭秘 在线思维导图免费制作，点击“编辑”按钮，可对 CSS揭秘 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：3a22e1a90e4669a38f53e6ba57d01970
树图思维导图提供 层层叠叠造句子精选58句 在线思维导图免费制作，点击“编辑”按钮，可对 层层叠叠造句子精选58句 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：243d63397c18e0b1db3313ac282f69d4
沪公网安备 31011502019485号
上海工商