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
-