您的位置：首页 > Web前端 > CSS

前端基础(2)--CSS了解

2019-07-10 23:50 183 查看

CSS简介

CSS：Cascading Style Sheets 层叠样式表，CSS一般写于外部文件，使用link引入，内联样式也属于CSS的范畴，但无法复用，且会使标签臃肿，相对使用较少。

CSS选择器的规范
①

选择器 {属性: 值; 声明1; 声明2}
，每个选择器都可以有多个声明(以分号隔开，一般换行书写)，对于由多个单词组成的值需要加双引号(一般在字体中出现)；
②选择器可以分组，如
h1,h2,p {x:x;}
，即可以将多个元素分为一组共用选择器；
③选择器的继承，如
html{x:x;}
即页面下所有元素都继承，如块中的所有元素都继承该
<div>
的样式，但有些元素和属性不继承，也可以使用重写元素/类选择器来进行覆盖。

派生选择器：

ol li{x:x;}
意为只对ol元素下的li元素应用选择器，对其他的ol与li元素不生效。

ID选择器：

#id名{x:x;}
意为只对id为此id名的元素应用选择器，
#id名 h1{x:x;}
意为只对id为此id名的元素下的h1元素应用派生选择器。

类选择器：

.类名{x:x;}
对所有class属性为类名的元素应用选择器，
.类名 li{x:x;}
对class属性为类名的元素下的li元素应用该类派生选择器，
ol .类名{x:x;}
只对class属性为类名的ol元素起作用，对其他的class属性为该类名的元素不起作用。

属性选择器和值选择器：

[title]{x:x;}
为所有含title属性的元素应用选择器，
[title=qq]{x:x;}
为所有title属性值为qq的元素应用选择器，其多用于为表单元素设置样式，如
input[type=text]{x:x;}
意为对所有input元素下的type属性值为text的元素应用选择器，表单元素没有class和id属性，因此常用属性和值选择器，如表所示。
此中，如
[title|='en']{}
可以匹配title=‘en’/'en-ch’但不能匹配
title='ennn'

元素选择器：即

元素名{x:x;}
，注意对单个样式属性添加多个值时
{color: blue, red;}
，默认为当第一个值不可用时自动降级为第二个值；

CSS的层叠次序：其按优先权排列如下：
①内联样式，即位于HTML元素标签内部的样式，使用style标签属性；
②内部样式表，位于

<head>
标签内
<style>
标签中的样式(其中的优先级排序为ID选择器＞类选择器＞元素选择器)；
③外部样式表，即导入的CSS文件；
④浏览器的默认设置；
注意若在某个选择器上拥有!important则确保样式。

style属性中的样式(内联样式)：不是所有的样式都支持内联样式设置，一般只在一些特殊情况时使用，尽量使用内部样式表和外部样式表。
①字体颜色color：

<h1 style='color:red'>
；
②字号font-size：
style='font-size: 16px'
；
③字体：
style = "font-family: 'Sans-serif'"
；
④背景颜色： 
style= 'background-color: red'
；
⑤文本水平对齐方式text-align：
style='text-align: center'
（style=’'中不同样式可以使用;隔开）

关于颜色表示：①hex code，CSS中，可以使用6位16进制码来表示颜色，每2位分别表示RGB的颜色数量，即#FFFFFF为白，#000000为黑，也可以缩减为3位如#f00；②rgb值，写为rgb(0,0,0)或rgb(50%, 0%, 50%)；③直接使用颜色的单词，red/green/yellow等。

CSS背景：所有元素的背景属性都不能继承。
①

background-color: red
为元素设置背景颜色；
②
background-image: url(不加引号)
为元素设置背景图片；
③
background-repeat:repeat-x/y
分别表示只允许在x/y方向上平铺，
no-repeat
表示禁止平铺，默认铺满；
④
background-position: center
为元素设置背景定位，其中有多种表示方法：
Ⅰ关键字，如
top/bottom/left/right/center
，其一般成对出现；
Ⅱ百分比，如
50% 50%
意为图像中心与元素中心对齐，不常用；
Ⅲ长度值，如
100px 50px
意为图像的左上角从元素的左上角开始向右平移100px，向下平移50px；
⑤
background-attachment: fixed/scroll
，锁定背景图像/背景图像随页面滚动而滚动。

CSS文本：定义文本的外观，文本属性可继承。
①

text-indent:20px/20%(意为缩进父元素宽度的20%)/2em(意为缩进2字符)
，可以为负；
②
text-align: left/right/center(只影响文本而<CENTER>标签将整个元素居中)/justify(两端对齐)
；
③
word-spacing:30px/1em
字间隔；
④
word-spacing:10px/1em
词间隔；
⑤
letter-spacing:10px/1em
字母间隔；
⑥
text-transform:none/uppercase/lowercase/capitalize
不做修改/全大写字符/全小写字符/首字母大写；
⑦
text-decoration:none(用于去除文本自带的效果如a元素)/underline(下划线)/overline(上划线)/line-through(删除线)/blink(文本闪烁)
，可在一个装饰器的该属性中同时添加多个值其效果可以叠加，但不同的选择器中的相同属性会替换而不是叠加；
⑧
white-space:normar(将连续的空白符转换为一个空格)/pre(不忽略所有的空格和换行)
,其余值如表所示；

⑨
direction:ltr/rtl
从左到右(默认)/从右到左；
⑩
line-height:20px(固定值)/200%(等价于2) /2(即原行间距的2倍)/normal(默认行间距)
；

注意，在CSS选择器中，

元素1, 元素2{}
表示对元素1和元素2进行选择，
元素1 元素2{}
表示对元素1下的元素2进行选择，派生选择器的层叠关系要理清。

CSS字体：定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
①

font-family:特定字体
(取决于用户系统上是否安装), 通用字体(“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”)，可以同时指定多个字体系列，会按照顺序搜索，若都无，则使用系统默认；
②
font-style: normal(文本正常显示)
/italic(文本斜体显示，修改字母结构)/oblique(文本倾斜显示，正常竖直文本的倾斜)；
③
font-variant: small-caps
；将字母设置为小型大写字母(即字号不同的大写字母aA)；
④
font-weight:900
(100-900，700与bold等价)/bold字体加粗；
⑤
font-size:20px(像素设置)
/2em(以当前字符大小为基准的倍数设置)/100%(以当前字符大小为基准的百分比设置)。

CSS链接样式：a元素在不同的状态时有不同的指代名称，其可以作为元素的名称设置元素选择器，如下：
a:link - 表示普通的、未被访问的链接，即a元素的初始状态(其默认状态为蓝色带下划线字体)；
a:visited - 用户已访问的链接，即已经访问过的链接(改变形态，多用于只能使用一次的链接)；
a:hover - 鼠标指针位于链接的上方，鼠标悬停时改变形态；
a:active - 链接被点击的时刻，鼠标点击时改变形态，所有可以应用于文本/字体/背景的选项都可以应用于该链接的表示形态。

CSS列表：①

list-style-type:disc(默认实心圆)
/circle(空心圆)/square(实心方块)/decimal(数字)/lower-latin(小写字母)/cjk-ideographic(汉字?)
②
list-style-image: url('xxx.jpg')
使用图片作为标记
③
list-style-position:inside
(标记在列表内，占据列表元素位置)/outside(标记在列表外)
可以将上述三个属性合写：
list-style: url('xxx.jpg') circle inside
。

CSS表格：①

border:1px solid blue
;其中第一个参数为边框厚度(可以指定px和em)，第二个参数为边框形态，solid/dashed/dotted/hidden分别为实线/虚线/点状线/隐藏(用于处理边框冲突)，第三个参数指定颜色，可使用#FFF与rgb()表示的颜色；注意table和td/th的边框并不相同，若只有table/th,td元素有设定边框则只有外框/内框，若全部设定则为双框；
②可以对table添加属性
border-collapse:collapse
，可以将内外边框折叠为一个边框，即无双边框显示；
③表格的宽度与高度，
width:100%
(一般只使用百分比)意为将表格的宽度设置为显示页面宽度的100%，可以对td/th元素设置宽度，影响整列；
height:50px/5em/(100%)
，可以设置高度，对table元素设置高度百分比意为对整个页面的占比；
④
text-align:right/center
设置表格文本水平对齐方式，
vertical-align:top/center
设置表格文本竖直对齐方式；
⑤
padding:15px
可以设置表格内边距，即表格文本内容与边框距离(可能与表格宽度与高度冲突)；
⑥
color/background-color
可以设置文本/表格背景颜色；
⑦
table-layout:fixed
意为根据设置的宽高来显示表格(表格内容可以出界)，默认为按表格内容；
⑧
caption-side:top/bottom
设置表格标题的位置，必须存在
<caption></caption>
标签；
⑨
border-spacing:30px 50px
必须在不折叠边框时使用，控制单元格之间空白的间距，第一个元素为横向间距，第二个元素为纵向间距；

CSS轮廓：

outline:2px solid blue
与边框类似，三个参数分别表示厚度,颜色,形态，并且顺序可变，表示给元素添加最外层轮廓(位于边框外层，紧贴着边框而存在，位于外边距之内)。

CSS框模型
如图所示，在网页布局中，元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素，元素的背景应用于元素边框(含)以内的内容，元素的width/height属性只标识元素本身。

(1)CSS的内边距(padding)，表示元素内容距边框的宽度，若只指定一个值，则四边边距都为此值，可以按上右下左的顺时针方向指定四个边的内边距，也可用

padding-top/left:1px/2em/20%
来分别指定；
若只指定padding:10%，则其按父元素的width的10%来划定指定元素的内边距，且上下左右一致(段落元素的右边距与其宽度有关)。

(2)CSS的边框(border)，其具有三个属性，style/color/width，并拥有四个单边属性，因此可以用多种方式表示CSS边框，

border-top:2px red solid
;(规定上边框三属性)/
border:1em red solid
;(规定全部边框三属性)/
border-style:solid*4
(规定4边框单属性); 注意边框style属性默认为none，因此必须设置边框属性否则边框不存在，solid/dotted/dashed/double等。(颜色transparent为不可见)。

(3)CSS的外边距(margin)，表示元素边框与其他元素的空白区域，其用法与内边距类似，但可以使用多种长度单位，且外边距可以为负值，即元素重叠；浏览器一般对元素有默认的外边距设置，可覆盖。

(4)CSS的外边距合并，当两个元素的垂直外边距接触时，其会合并成一个外边距(取较大值)，是为了文本页面的显示美观(多个段落的外边距会两两合并)，但行内框/浮动框/绝对定位中的外边距不合并。

(5)元素的框模型，html中有一部分元素称为块级元素(如

<div><p>
等)，其显示为一块内容，‘块框’；有一部分元素称为称为行内元素(如
<span>
等)，其内容显示在行内，并不会自动添加换行和上下边框，称为行内框，另有形如
<div>xxx<p>yyy</p></div>
的元素称为无名框，即页面中所有元素都是框。
使用
display:none
属性可以改变框类型，none(无)/block(块框)/inline(行内框)/inline-block(行内块元素，综合两个框的特性，其不自动换行，可以识别宽高属性，默认排列方式从左至右)。

CSS定位
CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则都按普通流定位，块级框从上到下排列，框之间的垂直距离由外边距指定。

(1)CSS的position属性：static(普通流)/relative(元素框偏移，但仍然保持原本的形状并且占用原本空间，并不生成新框)/absolute(元素原本的框删除，其他元素正常排列，新生成一个块级框覆盖在其他元素上，相对其包含块定位)/fixed(与absolute类似，但相对视窗定位)

(2)其他相关属性：①

overflow:visible
(内容不会被修剪，呈现在元素框外)/hidden(内容会被修剪，多余内容不可见)/scroll(内容会被修剪，并且显示两个滚动条)/auto(如果内容被修剪，自动显示滚动条)；②clip:rect(上右下左)裁剪图片；③z-index:0/1/2表示在z轴上显示的次序，支持负数

(3)CSS相对定位：

position:relative
，使用left/right/top/bottom属性指定其相对于原本框所在位置的位移，一般只使用left/top，一般会覆盖其他元素；

(4)CSS绝对定位：

position:absolute
，绝对定位使元素与文档流无关，即设置了绝对定位的元素不参与文档流的创建，其直接根据定位覆盖在其他元素上；

(5)CSS浮动：①clear:both/left/right，意为禁止元素两边出现浮动的元素，若有则自己换行(通过给自己添加上外边距来实现)，其只能改变自己的位置，不影响其他元素位置；②float:left/right/none(默认)，元素float之后脱离原文档流但不会覆盖元素，多个浮动的元素会按照顺序排列，若宽度不足则自动换行，其根据前一个浮动的元素的高度决定换行的高度，因此可能出现被卡住的情况(前两个元素的高度不一致，且最左的最高)。

一个关于CSS浮动的问题：在想设置一个块用于包裹两个浮动元素时，由于浮动元素不占用文档内位置，块的高度默认为0，因此设置不成功，其解决办法：①在块内设置一个空元素添加clear属性，其添加了足够大的上外边距因此撑起了块高度；②给浮动元素容器即块添加overflow:auto属性；③给浮动元素后面的元素添加clear属性；④使用CSS伪元素，其应用于包裹两个浮动元素的块，具体如下。

关于CSS框模型，CSS定位，CSS浮动是一个很复杂的问题，此处只是简单介绍了其相关概念和简单运用，具体分析限于时间原因留待以后进行。

CSS选择器详解
(1)元素选择器：也叫类型选择器，类型选择器匹配文档语言元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例；
(2)选择器分组及声明：分组即

h1,p,table{}
等将多种元素分为一组共用一个选择器，声明即
{x:1;y:2}
使用分号将多个属性隔开；
*{}
表示通配所有元素；
(3)类选择器：
.x{}
，在元素标签中使用class属性来指定，可以同时指定多个类选择器
class='x y'
，选择器在定义的时候可以嵌套，
.x.y{}
表示class属性同时包含x,y时才应用，且若有分别的
.x{}
,
.y{}
选择器存在，则应用三个选择器下的所有属性，且多类选择器下的属性应用优先级高；
(4)ID选择器：
#x{}
，其与类选择器的指定方式类似，使用id属性来指定，其与类选择器的差异：在一个html文档中一个id选择器只能使用一次，且不允许多词指定，即一个id选择器最多只能被使用一次，一个元素最多只能使用一个id选择器，其一般应用于不知道某个元素是什么但一定存在的情况，对其指定属性，id和类选择器名都对大小写敏感；
(5)属性-值选择器：
元素名[属性][属性='xxx'][属性='yyy']{}
，用于匹配含该属性/该属性值为’xxx’的指定元素，可以指定多个属性，即匹配包含多个属性的指定元素，其值的操作如上表；
(6)后代选择器：
元素1 元素2{}
，意为对元素1下的元素2应用属性(无论嵌套多深，且不作用于元素1)，
元素1.a{}
意为对所有的class='a’的元素1应用该类选择器，
元素1 .a{}
意为对元素1下的所有class='a’的元素应用该类选择器，
.a 元素1{}
意为对所有class='a’的元素下的元素1应用该类选择器；
(7)子元素选择器：
元素1 > 元素2 {}
，意为选择作为元素1子元素的元素2应用选择器，而非元素1下的所有元素2(即只选择1层嵌套，多层嵌套不论)；
(8)相邻兄弟选择器：
元素1+元素2{}
，意为选择紧跟在元素1后的元素2应用选择器，且元素1和元素2必须拥有相同的父元素；
(9)CSS伪类：如a元素的伪类，a:active意为处于点击状态的a元素，
元素1:first-child
意为作为第一个子元素的元素1(非元素1的第一个子元素)，伪类是针对当前元素的状态的，
元素1:lang(x)
意为对lang='x’的元素应用选择器(对不同的语言定义不同的规则)，伪类的其他属性如下所示；

(10)CSS伪元素：与伪类不同，
a:first-line
意为a元素的第一行，
a:first-line{}
意为对a元素的第一行应用选择器，CSS伪元素可以与CSS类选择器叠用，如
p.article:first-letter{}
意为对class属性为article的p元素的首字母应用选择器，CSS伪元素的部分属性如下所示。

CSS对齐：①文本对齐，参上述CSS文本；②

margin:auto
，即平均分配外边距，可以使当前元素居中(左右居中)；③使用定位和浮动对齐。

CSS尺寸：每个元素都有width/height/min-width等属性，且都支持像素值和百分比设定，可用于设定元素的尺寸。

CSS分类(Classification)：用于控制元素的显示/位置/可见情况等，①cursor:wait/move/auto/default/text/help等，改变光标置入元素区域时的形象；
②visibility:visible(默认值，元素可见)/hidden(元素不可见,但依旧占据原来的位置)/collapse(在表格中使用，可删除某一行，下面的行向上移)；
③opacity:0.5用于设置透明度，意为透明度50%；

CSS3：是CSS的最新版本，添加了很多的样式，如可以使元素偏转，可设置圆角边框/边框阴影/多重背景/文本阴影/自动换行/动画(不添加js和flash)等。

雪碧图：CSS sprite，即将需求的多个小图标合成为一张大图，节省了网页的http请求次数，同时缩小了图片的大小，其原理为CSS的背景设置中拥有的background-position属性，在圈定框大小和位置的同时，使用该属性将背景图片移动以完成显示需要的图标的目的。

一些相关的较热门的框架bootstrap，swiper，vue，node.js等，后续有时间时会继续了解。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航