文章目录
CSS样式
一、CSS的基础语法
CSS的基础语法为:选择器{属性1:值1;属性2:值2}
其中:width:宽
height:高
background-color:背景色
长度单位:
1.px:像素
2.%:百分比
外容器1:600px;当前容器 50%:300px
外容器2:400px;当前容器 50%:200px
二、CSS样式的引入方式
2.1内联(行内、行间)样式
内联(行内、行间)样式是在html标签上添加style属性来实现的。
2.2内部样式
内部样式是在<style>
标签内添加的样式。其优点为:可以复用代码。
2.3内联样式与内部样式的区别
内联样式与内部样式的主要区别为:
内部样式的代码可以复用、符合W3C的规范标准,尽量让结构和样式分开处理。
三、外部样式
外部样式需要引入一个单独的CSS文件,就是 name.css;
可以通过link标签引入外部资源,rel属性为指定资源跟页面的关系,href属性为资源的地址。
四、CSS中的颜色表示
4.1单词表示法
使用单词表示法如:red、blue、green、yellow…
4.2十六进制表示法
十六进制表示法如:#000000(黑色);#ffffff(白色)等等
4.3rgb三原色(red、green、blue)表示法
rgb三原色表示法:rgb(255,255,255)表示白色,其取值范围为0 - 255。
4.4获取颜色
在编写代码时,我们可能记住这些表示法太不方便了,因此我们可以通过寻找一些获取颜色的工具,如photoshop
五、CSS的背景样式
background-color为:背景色
background-image为:背景图
注:url为背景地址;默认的情况是会水平垂直都铺满背景图。
background-repeat为:平铺方式
其中:repeat - x:x轴平铺
repeat - y:y轴平铺
repeat:x,y轴都进行平铺,取默认值
no-repeat:都不平铺
background-position为:背景位置
x,y可以使用number(px,%)或单词,如:
x:left(左)、center(中)、right(右)
y:top、center、bottom(下)
background-attachment为:背景图随滚动条移动的方式
scroll:默认值为按照当前的元素进行移动的
fixed:背景位置是按照浏览器进行偏移的
六、CSS边框样式
border-style为边框样式的语法,其中:
solid:实线
dashed:虚线
dotted:点线
border-width为边框大小,其中可以是:
px(像素)…
border-color为边框颜色,其中:
red;#f00 等等
边框也可以针对某一边框进行单独设置:border-left-style;方向有:left、right、top、bottom
CSS的边框颜色可以设置成透明颜色,利用transparent则可以设置。
七、CSS文字样式
7.1字体类型
font-family为字体类型,其中包括:
英文字体:Arial,‘Times New Roman’
中文字体:微软雅黑(‘Microsoft YaHei’),宋体(SimSun)
注:对于字体有空格的需要加上引号。
衬线体和非衬线体;
需要注意的是:1.多个字体类型的设置目的
2.引号的添加目的
7.2字体大小
font-size为字体大小
默认值为:16px
写法为:number(px);单词(small ,large…)不推荐使用
7.3字体粗细
模式:正常字体(normal);加粗(bold)
写法:单词(normal,bold)或number(100 200 … 900,100到500都是正常的,600到900都是加粗的)
7.4字体样式
模式:正常字体(normal);斜体(italic)
写法:单词(normal,italic),其中oblique也可以表示斜体,一般用的比较少
italic与oblique的区别:
1.italic带有倾斜属性的字体才可以设置倾斜操作。
2.oblique没有倾斜属性的字体也可以设置倾斜操作。
八、CSS段落样式
8.1文本装饰
text-decoration为文本装饰,其中:
1.下划线为:underline
2.删除线为:line-through
3.上划线为:overline
不添加任何装饰为:none
注:如果需要添加多个文本装饰:line-through underline overline
8.2文本大小写
text-transform为文本大小写(只针对英文段落)
小写:lowercase
大写:uppercase
只针对首字母大写:capitalize
8.3文本缩进
text-indent为文本缩进
首行缩进
em单位:为相对单位,1个em永远都是跟字体大小相同
8.4文本对齐方式
text-align为文本对齐方式
对齐方式有:left、right、center、justify(两端点对齐)
8.5定义行高
line-height为定义行高,通常一行文字的高度,上边距和下边距的等价关系。
默认的行高值不是固定的,而是变化的,是根据当前字体的大小再进行不断的变化。
其取值为:1.number(px)或scale(比例值,跟文字大小成比例关系)
8.6字体之间的间距
letter-spacing为字之间的间距
word-spacing为词之间的间距(针对的是英文段落)
对于英文和数字不自动折行问题:
1.word-break:break-all为非常强烈的折行
2.word-wrap:break-word为不是那么强烈的折行,会产生一些空白的区域
九、CSS复合样式
复合样式的写法,是通过空格的方式来实现的。复合样式的写法有的是不需要关心顺序,例如background、border,而有的是需要关心顺序的,如font。
1.background:red url() repeat 0 0;
2.border:1px red solid;
3.font:最少要有两个值:size,family(样式)
其中写法正确的有:weight style size family
style weight size family
weight style size/line-height family
一个CSS属性只能控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫做复合样式。
注意:尽量不要混写,如果需要混写,那么必须要先写复合样式再写单一样式。
十、CSS选择器
10.1ID选择器
ID选择器写法为:
css:#elem{}
html:id = “elem”
注意:
ID是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的
命名的规范,必须由字母,下划线,中划线,字母(并且第一个不能是数字)。
1.驼峰写法:searchButton(小驼峰)、SearchButton(大驼峰)、是。searchSmallButton(中驼峰)
2.短线写法:search-small-button
3.下划线写法:search_small_button
10.2CLASS选择器
CLASS选择器写法为:
css:.elem{}
html:class=“elem”
注意:
1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候,样式优先级根据CSS决定,而不是class属性中的顺序
4.标签+类的写法,如p.box{background:red;}
10.3标签选择器(TAG选择器)
css:div{}
html:
<div></div>
使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择器
10.4群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用
10.5通配选择器
*{ }:div,ul,li,p,h1,h2…{}
尽量避免使用通配选择器,因为会给所有标签添加样式,慎用
使用的场景:去掉所有标签的默认样式时
10.6层次选择器
后代 M N{ }
父子 M > N { }
兄弟 M ~ N{ } 为当前M下面的所有兄弟的N标签
相邻 M + N { } 为当前下面相邻的N标签
10.7属性选择器
M[attr] {}
=:完全匹配
*=:部分匹配
^=:开始匹配
$=:结束匹配
[] [] [] :组合匹配
10.8伪类选择器
CSS伪类用于向某些元素添加特殊的效果,一般用于初始样式添加不上的时候,用伪类来添加。
M:伪类{}
:link 访问前的样式(只能添加给a标签)
:visited 访问后的样式(只能添加给a标签)
:hover 鼠标移入时的样式(可以添加给所有的标签)
:active 鼠标按下时的样式(可以添加给所有的标签)
注意:
1.link visited,只能给a标签加,hover和active可以给所有的标签加
2.如果四个伪类都生效,一定要注意顺序:L V H A
3.一般网站只这样去设置:a{}(link visited active) a:hover{}
CSS伪类选择器还有:
:after、:before 是通过伪类的方式给元素添加一段文本内容,使用content属性
:checked、:disabled、:focus 都是针对表单元素的
10.9结构性伪类选择器
nth-of-type() nth-child()
角标是从一开始的,1表示第一项,2表示第二项;n值表示从零到无穷大
first-of-type
last-of-type
only-of-type
nth-of-type()和nth-child()之间的区别
type为类型
child为孩子
十一、CSS继承
文字相关的样式可以被继承
布局相关的样式不能被继承,默认是不能继承的,但是可以设置继承属性,inherit值。
十二、CSS优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
2.内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入3方式优先级高
3.单一样式优先级
style行间>id>class>tag>*>继承
注:style行间 权重为1000
id 权重为100
class 权重为10
tag 权重为1
4.!important
提升样式的优先级,非规范方式,不建议使用
5.标签+类与单类
标签+类>单类
6.群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级就高
7.层次优先级
1.权重比较
ul little .box p input 1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}