CSS引入方式、选择器、选择器的优先级、CSS长度单位、颜色单位、字体样式、文本样式、伪类样式、列表样式、背景属性
文章目录
CSS
CSS含义
css含义:层叠样式表(Cascading style sheets)
作用:修饰页面中的标签,如颜色、大小、间距等,对页面的元素进行定位和布局
含义:所谓层叠,可以将网页想像成一层一层的结构,层次高的样式会覆盖层次低的样式,我们的CSS可以为每一层设置不同的样式,处于文档最底层被称为文档流,元素默认都在文档流存放。
CSS引入
- 行内样式(内联样式):将style属性+样式写入具体的html标签中的方式,称为内联样式,所用范围为当前标签,内联样式不能重复使用,内联样式将结构和表现进行绑定,耦合度高,不方便后期维护
- 内部样式:使用style标签写在head标签内,所用范围,当前页面。
- 外部样式:单独使用后缀名为.css的文件来 写样式,在当前页面中使用link标签引入外部样式,所有页面都可以共享样式,有利于重复使用,在开发中推荐。结构和表现分离,有助于后期维护。
CSS语法
CSS语法结构:选择器+声明块
选择器:通过选择器可以找到页面中需要修饰的元素
选择器{样式名:样式值;}多个样式可以使用分号隔开
CSS注释和HTML标签注释作用相同,都是解释说明当前代码的作用
CSS选择器
-
元素选择器(标签选择器)
表示页面中所有的标签
-
ID选择器
通过元素的ID可以 选择唯一的元素,ID值在当前页面不能重复
语法:#ID值{ 样式名称:样式值; }
-
类选择器
使用标签的class属性为标签进行分组,属性值相同为一组,通过元素的class属性选中一组元素进行修饰
语法:.类名{ 样式名称:样式值;}
-
并集选择器
使用选择器分组可以同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3{ 样式名称:样式值;}
-
通配符选择器
选择页面中所有的元素
语法:*{ 样式选择器:样式值}
-
交集选择器(复合选择器)
选择div标签并且class值为d1的元素,可以选择同时满足多个选择器的元素。
语法:选择器1选择器2{ 样式名称:样式值;}
两个选择器直接相连,中间没有任何符号
-
伪元素选择器
::first-letter{};元素的第一个字符修改样式。仅适用于块级元素中
::first-line{};元素的第一行修改样式。仅适用于块级元素
伪元素表示标签中的内容,不是标签的状态。
::before表示在元素的最前面
::after表示在元素的最后面
-
子元素和后代选择器
-
在html中元素之间存在层次关系:
子父关系:子元素和父元素。
兄弟关系:兄弟元素之间。
祖先元素:父元素也是一种祖先元素
后代元素
-
后代选择器:指定元素的所有后代元素
语法:祖先元素 后代元素{ }
div.c1{}表示div标签且类名为c1的元素
div .c1{}表示div标签中的所有类名为c1的子元素
-
子元素选择器
body下的p标签,且为body的子元素(排除其它后代元素)
body> p{}
-
-
属性选择器
- title标签:表示鼠标移动到该元素后标签的提示信息
p[title]{};修改所有带title属性的p标签的title属性
[属性名称];选取所有含有该属性名称的元素
p[title=‘喜欢’]{};修改所有含有title属性且值为喜欢的p标签的属性。
p[属性名^=‘属性值’];选取含有指定属性值开头的属性名的元素。
p[属性名$=‘属性值’];选取含有指定属性值结尾的属性名的元素。
p[属性名*=‘属性值’];选取含有指定属性值的属性名的元素。
-
子元素伪类选择器
body p:first-child可以理解为body标签下的第一个子元素且同时元素为p标签
p:first-child可以理解为父元素标签下的第一个子元素且同时元素为p标签
-
后一个兄弟选择器:span后一个兄弟节点,而且是紧挨着的元素
span+选择器{}
后兄弟选择器:span标签之后的所有的兄弟元素
span~选择器{}
-
否定伪类,可以从已经选择的元素中剔除某些元素
选择器:not(选择器)
-
样式的继承:子元素的样式可以继承父元素的样式
祖先元素的样式,后代元素有可能会继承
不是所有的样式都拥有继承性
选择器的优先级
不同的样式使用到同一个元素中,根据选择器 的优先级,优先级高的起作用。
当不同类型的选择器叠加使用时,权重相加,大的结果起作用。
相同层级的权重相加不能超过当前层级–权重相加不进位
权重相同按顺序执行
使用并集选择器,优先级不相加,优先级单独计算。
继承没有优先级,通配符优先级为0,因此有继承和通配符两个属性时,优先级为通配符选择器
CSS长度单位
-
像素px
屏幕中每个发光的小点,可以理解为像素,屏幕都是由这些像素点构成的。
1600*900表示横向1600个像素点,纵向900个像素点。
显示越清晰,像素越小,反之显示越模糊,像素越大。
我们平时CSS样式中设置的像素成为css像素,屏幕本身的像素成为物理像素。
默认物理像素和css像素1:1显示,放大缩小后就不是了
-
百分比
设置百分比是以父元素的样式来计算
使用百分比能够同比例变化,父元素变化,子元素随之变化
创建自适应页面时常使用
-
em
em和百分比类似,不过是相对于字体大小来计算的
1em=1个font-size的值
使用em时,当字体大小发生改变,则em也随之改变
如果设置的样式和字体相关,就可以使用em单位
CSS颜色单位
-
颜色单词
在CSS中可以直接使用颜色的单词来表示不同的颜色,如红色red,蓝色blue,绿色green。
-
RGB表示法
RGB表示法是通过Red,Green,Blue三原色,通过三原色不同的配比,来表示不同的颜色。
值在0255之间,也可以使用百分比来表示,百分比最终也会转换为0255之间的值。
RBG表示法可以使用最后a表示透明度,rgba(),0~1之间,0表示全透明,1表示不透明。
-
使用十六进制表示法
#+十六进制表示法表示颜色,原理和rgb表示法相同,只不过是用十六进制数值方式来表示。
十六进制:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f表示,逢16进1。
每一组表示一个颜色,00~FF,00表示没有,相当于RGB中的0,FF表示最大值,相当于RGB中的255。第一组表示红色,第二组表示绿色,第三组表示黄色。
#FFCCCC可以简写为#FCC,#FFFFFF可以简写为#FFF
CSS字体样式
字体颜色、字体大小、字体系列、字体分类、字体粗细、字体风格。
-
设置字体颜色:color:red
-
设置字体大小,不是文字本身的大小,文字都是在看不见的格子的大小,设置的font-size其实都是方格的大小,字体效果不同,可能会有所影响字体大小。如:font-size:50px,字体的默认大小为16px
-
字体系列,font-family如果字体不支持,则使用默认字体,可以同时设置多个字体系列。浏览器使用的字体是计算机中安装的字体。
-
字体分类:属于字体分类,font-family,网页中将字体分成了5类:serif衬线字体,sans-serif非衬线字体,monospace等宽字体(开发中常用),cursive草书字体,fantasy虚幻字体。
-
字体风格,font-style,可选择normal正常显示效果,italic文本斜体显示,oblique文本倾斜显示,大部分浏览器对斜体和倾斜不做区分。
-
字体粗细:font-weight,值为bolder表示更粗的字体,bold表示加粗字体,lighter表示更细的字体。也可以使用100~900之间的值表示。
-
font-variant设置小型大写字母,可选值,normal正常值,small-caps文本以大写,较小的方式显示。
-
font可以设置字体的多个样式,不同的值用空格隔开,如font:italic small-caps bold 20px “微软雅黑”;
CSS文本样式
-
text-transform:设置字体的大小写,只影响英文
值:lowercase,全小写,
none,没有任何改动
capitalize:单词首字母大写
uppercase:所有单词大写
-
text-decoration:设置文本的修饰
值:underline:为文本添加下划线
overline:为文本添加上划线
line-through:为文本添加删除线
-
letter-spacing:设置字符之间的间距,一般用在中文中
-
word-spacing:设置单词之间的间距,一般用在英文中
-
text-align:文本对齐方式,可选值left左对齐,为默认值,right右对齐,center居中对齐,justify两端对齐。
-
行高:line-height
CSS中没有直接提供行间距的样式,可以间接的通过行高来设置,行高越大,行间距越大。网页中的文本内容实际上有一行一行的线,在字体的偏下位置,线与线之间的距离成为行高。文本会默认在行高的垂直居中显示。
行间距=行高-字体大小。
-
vartical-align:垂直方向对齐效果。多使用middle。
-
text-shadow:设置文本阴影
语法:text-shadow:阴影颜色,X轴偏移,Y轴偏移(x为正右偏移,为负右偏移)(Y为正向下偏移,Y为负向上偏移),阴影的模糊半径。
伪类样式
-
伪类样式
伪类专门表示元素的一种特殊状态,比如:访问过的链接或者普通的超链接。
<style> a:link{ /*未访问的链接*/ color:black; } a:visited{ /*已访问的链接*/ color:red; } a:hover{ /*鼠标悬浮的链接*/ color:yellow; } a:active{ /*已选中的链接*/ color:green; } </style>
四种伪类也可以应用在其他标签中
由于用户隐私问题,使用visited伪类修改时只能修改颜色
:focus表示获取焦点(常用在文本框获取焦点后改变样式)
::selection表示选中的内容改变样式
CSS列表样式
list-style-type:设置列表项标志的类型
none:无标记(去掉实心点),disc:实心圆点(默认值),circle:空心圆。
list-style-image:将图片设置为列表项的标记
list-style-image:url();
list-style-position:设置列表项标记的位置
inside:将列表项标记设置在文本项以内
outside:将列表项标记设置在文本项以外(默认值)
简写属性:list-style:none inside url();
CSS背景属性
-
-
background-color背景颜色,在元素的最底层,会被覆盖掉。
-
background-image背景图片
如果背景图片大于元素,则显示左上角;
如果背景图片和元素大小相同,则背景图片全部显示;
如果背景图片小于元素大小,则出现平铺效果。
-
background-repeat设置背景重复效果
repeat背景平铺效果,默认值;
no-repeat背景不重复;
repeat-x沿着X轴平铺;
repeat-y沿着Y轴平铺;
-
backgground-position设置背景的起始位置,默认在左上角。
-
使用关键字
(left,top,right,bottom,center)
left center:水平方向靠左,垂直方向居中;
right top:水平方向靠右,垂直方向靠上;
如果只设置一个值,则第二个值默认为center
-
也可以使用单位值xpos和ypos设置
background-position:150px,150px;向右150px,下150px
-
可以使用百分比表示
background-position:50%,50%;根据当前元素的宽和高进行计算。
-
-
background-size设置背景图片的大小
- auto默认值,图片原本的大小
- cover,放大,填充整个元素
- contain,保持图片的宽高比将图片放大填充整个元素(宽或高)
- 100px 100px;设置宽高均为100px
- 50% 50%;根据元素的宽高进行计算。
-
background-attachment:设置背景图片是否随滚动条一起滚动
- fixed:将图片固定在一个位置,不随滚动条移动,定义为窗口浏览器。
- scroll:默认值,背景图片随滚动条滚动。
-
background:linear-gradient( to top ,yellow,orchid,red);
颜色由下向上由黄向红渐变
background:linear-gradient( to top right ,yellow,orchid,red);
颜色由左下向右上渐变
-
浏览器前缀
浏览器的前缀:
-ms:IE浏览器
-moz:Firefox
--webkit:safari and Chrome