CSS样式
-
css：层叠样式表(cascading systle sheets)
-
作用：
-
修饰页面中的标签，例如：颜色、大小、间距
-
对页面的元素进行定位和布局
-
主要用于对页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框样式、边距等）以及版面的布局和外观显示样式
-
-
含义：所谓层叠，可以将网页想象成一层一层的结构，层次高的样式会覆盖层次低的样式，我们的CSS可以为每一层设置不同的样式，处于文档的最低层被称为文档流。元素默认都在文档流中放置
-
页面中所有的元素默认以文档流（标准流、普通流）
一、CSS的引入方式
-
行内样式（内联样式）
-
将style 属性+样式写入具体的html标签中的方式，称为内联样式
-
所用范围为当前标签，内联样式不能重复使用（不复用）
-
内联样式将结构和表现进行绑定，耦合度高（关联度高），不方便后期维护。
-
当特殊样式需要应用到个别元素时，就可使用内联样式
-
-
内部样式
-
使用style标签，在head标签内
-
所用范围，在当前页面。当前页面会重复使用
-
当某个文件需要特别样式时就可使用内部样式
-
-
外部样式（引入外部样式，外部引入样式）
<link href="#" rel="stylesheet" type="text/css">
-
单独使用后缀名为.css的文件来写样式
-
在当前页面中使用<link>标签引入外部的样式
-
所有的页面都可以共享样式，有利于重复使用，开发中推荐。
-
结构和表现分离，有助于后期维护。
-
当样式需要被应用到很多页面时，选择外部样式表，可以通过更改一个文件改变整个站点的外观
-
二、CSS语法规范
选择器+声明块
-
选择器：通过选择器可以找到页面中需要修饰的元素，根据不同的需求把不同的标签选择出来
-
声明块：由{}+样式组成
-
样式：样式名：样式值；
-
多个样式使用分号隔开，以键值队的方式出现
-
样式大小写不区分，但建议全部用小写字母，特殊情况除外，看起来更直观。
-
-
空格规范
-
样式值前面，冒号后面，保留一个空格
-
选择器（标签）和大括号中间保留空格
-
-
css注释：
-
css注释和html注释作用相同，都是解释说明当前代码的作用
-
css注释使用斜杠+星号，需要卸载style标签中或者css文件中
-
（css和HTML只有注释，JavaScript有单行注释和多行注释，注释不能嵌套）
三、选择器规范
类名规范
-
长名称或词组可以使用中横线来命名
-
不要使用纯数字、中文等命名，尽量使用英文字母来表示
-
命名要有意义，尽量使用别人能眼就知道这个类名的目的
-
命名规范可参考各大平台的前端开发手册
选择器
-
标签选择器
-
类选择器
-
ID选择器
-
通配符选择器
-
后代选择器
-
子代选择器
-
同级选择器
-
状态伪类选择器
-
属性选择器
-
子元素伪类选择器（伪类结构选择器）
-
否定伪类选择器，可以从已经选择的元素中剔除某些元素，语法：选择器 :not(选择器i)
-
伪类元素选择器
选择器优先级
-
继承/全局选择器(0)<元素选择器（1）<类选择器/伪类选择器（10）<id选择器（100）<内联样式（1000）<！important
-
复合选择器，权重有叠加，但不会有进位
伪类样式
用冒号加一些单词表示标签的不一样的状态
用冒号加一些单词表示标签的不一样的状态
-
伪类，专门用来表示元素的一种特殊状态，比如：访问过的链接，普通的未被访问过的链接，获得焦点的状态
-
a:link 未访问过的链接
-
a:visited 已访问过的链接
-
a:hover 鼠标悬浮时的链接
-
a:active 鼠标按下未弹起的链接（鼠标选中的链接）
-
-
锚伪类：常用于a链接的状态
-
为了确保生效，请按照LVHA的顺序声明：link\visited\hover\active
-
浏览器通过历史纪录来判断链接是否被访问过
-
由于涉及用户隐私问题，使用visitde只能设置字体的颜色，其他的不能设置
-
hover和active可以为其它元素设置，即也可以用在其他元素上
-
选择器：：selection{}表示设置页面中字体选中后显示的样式
-
表单伪类选择器文本框获取焦点后，采用
-
表单伪类选择器
-
：focus表示光标获取焦点
-
input：focus 表单元素获得光标时的状态
-
四、单位
1、长度单位
-
像素：px
-
屏幕中每个发光的小点，可以理解为像素，屏幕都是由这些像素点构成的
-
1920*900 表示横向1920个点，纵向900个点
-
显示越清晰，像素越小，反之像素越大
-
我们平时css样式设置的像素称为css像素，为psd像素即设计稿像素，屏幕本身的像素称为物理像素
-
默认物理像素和css像素1:1显示。（物理像素比不一定是1：1）
-
-
百分比：%
-
设置百分比是以父级元素的样式来计算
-
使用百分比能够同比例变化，父元素变化，子元素也变化
-
创建自适应页面时常使用
-
-
em
-
em和百分比类似，相对于当前字体大小进行计算
-
1em=1个font-size的值
-
使用em时，当字体大小发生改变，则em也随之改变
-
如果设置的样式和字体相关，就可以使用em单位。
-
-
rem
-
使用Html的字体大小来进行计算
-
2、颜色单位（颜色值）
颜色设置
-
使用颜色英文单词
-
在CSS中可以直接使用颜色的单词来表示不同的颜色
-
比如：红色red、蓝色blue、绿色green
-
-
rgb表示法（red\green\blue）
-
rgb表示法就是通过red、green、blue三原色，通过三原色不同的配比，来表示不同的颜色
-
比如（语法）：rgb(红色值、绿色值、蓝色值)
-
值在：0——255之间，255表示最大，0表示最小
-
-
值也可以使用百分比表示：
-
100%==255，0%==0
-
百分比最终也会转换为0——255之间的值
-
-
rgba(255,0,0,0.2)rgb表示发中最后一个值可以带透明度
-
透明度在0——1之间，表示不同的透明度，0表示全透明，1表示不透明
-
-
-
使用十六进制表示法
-
十六进制表示法
-
原理和RGB表示法相同，只不过使用的是十六进制的数值方式来表示
-
使用三组两位的十六进制数值表示颜色
-
语法#红色值 绿色值 蓝色值
-
十六进制
-
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
-
-
逢16进一个颜色
-
-00~ff
-
00表示没有：相当于RGB中的0（白色）
-
FF表示最大值：相当于RGB中的255（黑色）
-
第一组，表示红色00——FF
-
第二组，表示绿色00——FF
-
第三组，表示蓝色00——FF
-
-
两两重复的颜色可以简写
-
#FFFFFF 简写： #FFF（白）
-
#CCCCC 简写： #CCC（灰）
-
-
五、样式
1、字体样式
字体颜色、字体大小、字体系列、字体分类、字体粗细、字体风格
-
颜色和大小
-
颜色使用color
-
字体大小使用font-size
-
不是文字本身的大小，文字都是在看不见的格子中，设置的font-size其实是方格的大小
-
字不会定格写，所以字会小一些
-
字体的效果不同也可能会影响字体大小
-
谷歌字体默认大小16px，不同浏览器可能默认的显示字号大小不一致，我们尽量给一个明确值。可以给body设置
-
-
字体系列
-
font-family:
-
如果字体不支持，则使用默认字体
-
可以同时设置多个字体系列
-
可给body设置
-
浏览器使用的字体是计算机中已经安装的字体（在fonts文件夹里放着）
-
字体的分类
-
网页中将字体分为五类（在英文下对比）
-
serif：寸线字体，体现字体在毛笔的效果
-
sans-serif:非寸线字体，方方正正的效果，横平竖直的效果
-
monospace:等宽字体，比如I和H等宽
-
cursive 草书字体 不同浏览器显示效果不一样
-
fantasy 虚幻字体 不同浏览器显示效果不一样
-
@font-face 声明字体图标
-
-
-
-
字体风格
-
font-style
-
italic文本斜体显示
-
oblique文本倾斜显示
-
大部分浏览器对倾斜和斜体不做区分
-
normal正常，默认，文本正常显示
-
-
-
字体粗细
-
font-weight
-
bold（加粗，700）、bolder（特粗体）、lighter（细体）、normal（正常，400）、（数字）
-
-
也可以使用100—900之间的值来设置字体粗细
-
计算机中没有那么多级别的字体，所以需要达到效果，差别大才有加粗效果
-
-
设置小型大写字母
-
font-variant
-
可选值：
-
variant:n 不同的，变形的
-
caps：n 大写字母
-
normal：正常显示，默认值
-
small-caps:文本以大写，较小的方式显示
-
-
-
-
字体设置的简写
-
font ：可以设置字体的多个样式
-
可以将多个样式值写在一个font样式中，不同的值使用空格隔开
-
可设置的顺序如下
-
font-style
-
font-variant
-
font-weight
-
font-size/line-height
-
font-family
-
字体大小和字体系列必须写，其他可写可不写，也没有顺序要求
-
-
-
附加
-
letter-spacing：15px;表示英文单词间距
-
word-spacing:15px;表示文字间距
-
2、文本样式
文本大小写变形、文本修饰、文本对齐方式、字符串间距、文本缩减、行高、垂直对齐、文本阴影
-
text-transform:设置文本内容的大小写
-
可选值：
-
none（默认效果，显示效果没有任何改动）
-
captialize:单词首字母大写
-
uppercase:所有单词大写
-
Lowercase：所有单词小写
-
-
-
text-decoration:设置文本的修饰
-
可选值：
-
none：默认值，没有任何修饰效果
-
underline:添加下划线
-
overline：添加上滑线
-
line-through：添加中划线，删除线
-
-
设置a标签去除下划线a {text-decoration:none;}
-
-
letter-spacing:设置字符之间的间距，多用于中文(px)
-
word-spacing:设置单词之间的间距，多用于英文(px)
-
text-align:设置文本对齐方式
-
可选值
-
left:左对齐
-
right：右对齐
-
center:居中对齐
-
justify:两段对齐，通过文本之间的空格来调整对齐
-
-
vertical-align:base-lign基线对齐;top;middle;bottom
-
图片默认基线对齐
-
-
text-indent:设置首行缩进（em/px）
-
正值，右移动。负值，左移动
-
-
line-height：行高（px）
-
CSS中没有直接提供行间距的样式
-
可以间接通过行高来设置行间距，行高越大行间距越大
-
行高间距使用line-height设置行高来体现
-
网页中为文本内容实际上有看不见的一行一行的线，在字体的偏下位置，线与线之间的距离称为行间距
-
文字会默认在行高中的垂直方向居中显示
-
行间距=行高-文字字体大小
-
行间距=上间距+文本高度+下边距
-
也可以设置百分比，相对于字体大小进行计算
-
也可以直接用数字（2），表示的是当前字体大小的背数字，一般设置为1.5背
-
设置字体大小的同时可以设置行高，如果没有设置则使用默认值
-
font-size：16px/1.5;
-
-
对于单行文本，可以将行高和父元素一样高，这样单行文本元素在父元素的垂直居中位置
-
-
vertical-align:垂直方向对齐效果
-
属性值
-
top
-
middle
-
bottom
-
base-line（基线）（图片默认与文字的基线对齐）
-
也可直接设置数值，例如2px等等
-
主要用于垂直对齐,作用对象为行内元素(含行内块),单元格。对块级元素及其内的元素无效。”
-
-
-
text-shadow设置文本阴影
-
语法：text-shadoe(h-shadow v-shadow blur spread color inset(默认outset))
-
text-shadow(x轴偏移量 y轴偏移量 模糊距离 阴影尺寸 阴影颜色 外部阴影（默认）/内部阴影)
-
3、列表样式
-
list-style-type 设置列表选项标志的类型
-
可选值
-
none去掉实心点
-
disc 默认值表示实心原点
-
circle表示空心圆
-
square表示实心方块
-
-
-
list-style-image 将图片设置为列表项的标记
-
可选值
-
url(“地址”)
-
-
-
list-style-position 设置列表中列表项标志的位置
-
可选值
-
inside 列表标记项放在文本以内
-
outside 列表标记项放在文本以外（默认值）
-
-
-
list-style 简写属性
-
list-style： type position url();
-
4、背景样式
背景颜色、背景图片、背景平铺、背景图片位置、背景图片尺寸、背景图片固定、背景渐变色、背景透明度
-
background-color：设置元素的背景颜色，一般情况下背景颜色默认为transparent(透明)
-
background-image：设置背景图片
-
如果背景图片大于元素，则显示图片的左上角
-
如果背景图片和元素大小相同，则图片全部显示
-
如果背景图片小于元素大小，则出现平铺效果
-
背景颜色在背景图片之后即背景图片会压住背景颜色
-
-
线性渐变色
-
background-repeat:设置背景是否重复（平铺效果）
-
可选值
-
repeat 默认值，平铺
-
norepeat 不平铺
-
repeat-x 水平方向平铺
-
repeat-y 垂直方向平铺
-
-
-
background-position：（X Y ）：设置背景图片位置
-
背景图片默认在元素的左上角显示
-
x y表示左上角的坐标位置，图片的起始位置
-
可选值
-
使用关键字设置位置（方位名词单词）
-
left right center top center bottom
-
使用水平和垂直两个关键字进行图片定位
-
如果只设置一个值，第二个值默认居中显示
-
-
使用单位值（像素单位）设置位置
-
X 水平偏移量 正值图片右移 负值图片左移
-
Y 垂直偏移量 正值图片下移 负值图片上移
-
使用百分比单位设置位置，根据当前元素的宽和高进行计算
-
-X%
-
-Y%
-
-
-
-
background-size(宽 高)：设置背景图片大小，只规定背景图片的尺寸
-
使用关键字设置背景图片尺寸
-
background-size:auto;默认值，使用背景图片默认的大小，原始图片大小
-
background-size:cover;整个背景图片放大填充整个元素，可能会剪切一部分，部分图片显示不全
-
background-size:cotainer;保持背景图片的宽高比例，将图片放大到合适的比例位置，图片完全显示，但有可能元素有空白
-
-
100px 100px 使用像素设置背景图片的尺寸
-
50% 50% 使用百分比设置背景图片的尺寸
-
根据元素的高和宽进行计算
-
-
-
background-attachment ；设置背景图片是否跟随滚动条一起滚动，背景图片是否固定
-
可选值
-
fixed:将图片固定在一个位置，不随滚动条移动，定义为窗口浏览器
-
scroll：默认值，背景图片随滚动条一起滚动
-
-
-
background：简写属性
-
background:背景颜色 背景图片地址 背景平铺 背景图像固定/滚动 背景图片位子
-
没有顺序
-
-
线性渐变色
-
gradient： n.(尤指公路或铁路的)坡度，斜率，倾斜度; (温度、压力等的)变化率，梯度变化曲线;
-
background-image:linear-gradient(起始方向，颜色1，颜色2，……)
-
简写：background:linear-gradient(起始方向，颜色1，颜色2，……)
-
可以用来制作缺角的矩形
-
background: linear-gradient(-45deg, transparent 10px, red 0); 语法：`background-image``: linear-gradient(direction, color-stop 距离, color-stop2 距离, ...);
-
-
背景颜色半透明
-
background：rgba(red,green,blue,alpha)
-
alpha:0--1之间，表示透明度
-
附加
-
opcity：0-1；参数为0-1之间的一个数，表示元素的透明度
-
filter:blur(npx)；表示滤镜的模糊程度，blur(参数用px表示)
-
filter:opcity(0-100)
-
-
五、CSS属性书写顺序（重要）
建议遵循以下顺序书写：
-
布局定位属性
-
display/position/float/clear/visibility/overflw
-
-
自身属性
-
width/height/margin/padding/border/background
-
-
文本属性
-
color/font/text/white-space/
-
-
其他属性
-
content/cursor/border-radius/box-shodow/text-shadow/background:linear-gradient()
-
cursor:pointer/default/move/noallow
-
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
