CSS指层叠样式表（Cascading Style Sheets）。
样式定义如何显示HTML元素，通常存储在样式表中。
外部样式表通常存储在CSS文件中，只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观，可以极大提高工作效率。
CSS规则：
CSS规则由两个主要的部分构成：选择器+一条或多条声明。body：选择器，通常是需要改变样式的HTML元素。
CSS声明总是以大括号（{}）括起来，以分号结束。
为了让CSS可读性更强，一般每行只描述一条声明。
每条声明由一个属性和一个值组成，用冒号分开。
CSS注释：/* 注释内容 */
id和class选择器：
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义。<style> #para1 { text_align:center; color:red; } </style> <p id="para1">Hello World!</p>id属性尽量不要以数字开头，因为有些浏览器不支持。
class选择器用于描述一组元素的样式，class选择器不同于id选择器，class可以在多个元素中使用。
HTML元素以class属性来设置class选择器，CSS中，类选择器以"."来定义。<style> .center { text_align:center; } </style> <h1 class="center">标题居中</h1> <p class="center">段落居中</p>同样，class属性也尽量不要以数字开头。
CSS样式表：
当读到一个样式表时，浏览器会根据它来格式化HTML文档。
插入样式表的方法有三种：
- 外部样式表（External style sheet）
- 内部样式表（Internal style sheet）
- 内联样式（Inline style）
外部样式表：
当样式需要应用于很多页面时，选择使用外部样式表。
在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。
每个页面使用<link>标签链接到样式表。
内部样式表：
当单个页面需要特殊的样式时，选择使用内部样式表。
使用<style>标签在文档头部定义内部样式表。
内联样式：
当样式仅需要在一个元素上应用一次，选择内联样式，平时慎用！因为将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
在相关的标签内使用样式（style）属性。
-------多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
优先级：内联样式>内部样式>外部样式>浏览器默认样式
But：如果外部样式在<head> </head>头部信息里，放在了内部样式的后面，则外部样式将会覆盖内部样式。
CSS背景：
背景颜色：有如下三种定义方式。
背景图像：默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
让图像只在水平方向平铺：background-repeat: repeat-x;
让图像只在垂直方向平铺：background-repeat: repeat-y;
设置不平铺与定位：
简写为：
CSS文本：
文本颜色：
文本对齐方式：
文本修饰：
text-decoration属性用来设置或删除文本的装饰。
文本转换：
文本转换属性是用来指定在一个文本中的大写和小写字母。
文本缩进：
文本缩进属性是用来指定文本的第一行的缩进。
CSS字体：
font-family属性设置文本的字体系列。
一般应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，它将尝试下一种字体。
多个字体系列用一个逗号分隔指明。如font-family:"Times New Roman",Times,serif;
字体样式：
字体大小：
CSS链接：
不同的链接可以有不同的样式。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
a:link-正常，未访问过的链接
a:visited-用户已访问过的链接
a:hover-当用户鼠标放在链接上时
a:active-链接被点击的那一刻
当设置未若干链路状态的样式，也有一些顺序规则：
- a:hover必须跟在a:link和a:visited后面
- a:active必须跟在a:hover后面
CSS表格：
为了显示一个表的单个边框，使用border-collapse:collapse;
可以用width和height属性定义表格的宽度和高度。
表格文字对齐：
text-align属性设置水平对齐方式，或左，或右，或中心。
vertical-align属性设置垂直对齐方式，或顶部，或底部，或中心。
表格填充：
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：padding:15px;
CSS边框：
边框样式：
border-style属性用来定义边框的样式。
border-style:none：默认无边界
border-style:dotted：定义一个点线边框
border-style:dashed：定义一个虚线边框
border-style:solid：定义实线边框
边框颜色：
border-color属性用于设置边框的颜色。
还可以单独设置不同的侧面不同的边框：
CSS分组和嵌套选择器：
分组选择器：
为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。h1,h2,p { color:green; }嵌套选择器：
适用于选择器内部的选择器的样式。
p{ }：为所有的p元素指定一个样式。
.marked{ }：为所有class="marked"的元素指定一个样式。
.marked p{ }：为所有class="marked"的元素内的p元素指定一个样式。
p.marked{ }：为所有class="marked"的p元素指定一个样式。
CSS尺寸：
CSS显示与可见性：
display属性设置一个元素应如何显示，
visibility属性指定一个元素应可见还是隐藏。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素随让被隐藏了，但仍然会影响布局。
CSS定位：
position属性指定了元素的定位类型。
position属性的五个值：static、relative、fixed、absolute、sticky
static定位：HTML元素的默认值，即没有定位，遵循正常的文档流对象。
relative定位：相对定位元素的定位是相对其正常位置。
fixed定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
absolute定位使元素的位置与文档流无关，因此不占据空间。
sticky定位：基于用户的滚动位置来定位。
CSS Overflow：
CSS Overflow属性可以控制内容溢出元素框时在对应的元素区间添加滚动条。
CSS浮动：
CSS的浮动，会使元素向左或向右移动，其周围的元素也会重新排列，往往是用于图像。img { float:right; }如上，若图像右浮动，文本流将环绕在它左边。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。
clear属性指定元素两侧不能出现浮动元素。
CSS组合选择符：
组合选择符说明了两个选择器之间的关系。
后代选择器（以空格 分隔）：用于选取某元素的后代元素。
子元素选择器（以大于>号分隔）：选取某元素直接/一级子元素的元素。
相邻兄弟选择器（以加号+分隔）：选取紧接在另一元素后的元素，且二者有相同父元素。
普通兄弟选择器（以波浪线~分隔）：选取所有指定元素之后的相邻兄弟元素。
CSS伪类：
CSS伪类用来添加一些选择器的特殊效果。
CSS导航栏：
垂直导航条：ul { list-style-type: none; margin: 0; padding: 0; width: 100px; background: aliceblue; } //list-style-type:none：移除列表前小标志，一个导航栏并不需要列表标记。 //移除浏览器的默认设置，将边距和填充设置为0。 li a { display: block; color: darkcyan; padding: 8px 16px; text-decoration: none; } //display:block：显示块元素的链接，让整体变为可点击链接区域。 li a:hover { background-color: darkcyan; color: wheat; } //鼠标移动到选项上修改背景颜色。
效果如下：
- 可以在
<li>上添加text-align:center样式来让链接居中。- 可以在
<ul>上添加border属性来让导航栏有边框。- 如果要在每个选项上添加边框，可以在每个
<li>元素上添加border-bottom。
创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。
水平导航条：
ul { list-style-type: none; margin: 0; padding: 0; width: 300px; overflow: hidden; background-color: wheat; } li { text-align: center; float: left; } li a { display: block; color: white; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: darkcyan; }
效果如下：
CSS下拉菜单：
当鼠标移动到指定元素上时，会出现下拉菜单。//下拉按钮样式 dropbtn { background-color: darkcyan; color: wheat; padding: 16px; font-size: 16px; border: none; cursor: pointer; } //定位下拉内容 .dropdown { position: relative; display: inline-block; } //下拉内容（默认隐藏） .dropdown_content { display: none; position: absolute; background-color: white; min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 2); padding: 12px 16px; } //下拉菜单的链接 .dropdown_content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } //鼠标移上去后修改下拉菜单链接颜色 .dropdown_content a:hover { background-color: darkcyan; } //在鼠标移上去后显示下拉菜单 .dropdown:hover .dropdown_content { display: block; } //当下拉内容显示后修改下拉按钮的背景颜色 .dropdown:hover .dropbtn { background-color: darkcyan; }
效果如下：
CSS提示工具：
提示框在鼠标移动到指定元素上显示。
待整理…
CSS图像透明化：
设置图片透明度：img { opacity:0.4; }当鼠标移到图像上，图片变得清晰：
img { opacity:1.0; }
CSS属性选择器：
属性选择器：
//把包含（title）的所有元素变为蓝色[title] { color:blue; }
属性和值选择器：
//改变title="library"元素的边框样式[title=library] { border:5px solid green; }仅有title="library"的元素适用
属性和值选择器-多值：
//将title包含hello的元素变为蓝[title~=hello] { color:blue; }title=“hello world”、title="student hello"的元素适用，而title="student"不适用。
表单样式：
//给所有button设置样式input[type="button"] { width:120px; margin-left:35px; display:block; }//给所有text设置样式
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; }
CSS计数器：
CSS计数器根据规则来递增变量。
CSS网页布局：
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
头部区域：位于整个网页的顶部，一般用于设置网页的标题或者网页的logo。
菜单导航区域：一般包含了一些链接，可以引导用户浏览其他页面。
内容区域：一般有三种形式：
1列：一般用于移动端
2列：一般用于平板设备
3列：一般用于PC桌面设备
底部区域：位于网页的最下方，一般包含版权信息和联系方式等。
扫一扫
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
