![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS成长之路
koko_TT
Show me the code.
展开
-
CSS 成长之路(一)颜色、字体属性及文本属性
颜色颜色属性color的值不仅可以用颜色名表示如blue或者red等,还可以#加6位16进制的数字表示。如#123456,其中12两位表示红色的程度,34两位表示绿色的程度,56两位表示蓝色的程度,最终的颜色右三种颜色合成。同一颜色的两位相同的话可以简写,如红色#ff0000可以简写为#f00。纯白#fff,纯黑#000。字体属性字体大小font-size单位:px像素、em相...原创 2019-04-26 22:43:54 · 409 阅读 · 0 评论 -
CSS 成长之路(二)后代选择器、子代选择器、交集选择器与并集选择器
后代、子代选择器在HTML中普遍存在标签的嵌套,观察如下HTML5代码。<div> <span>111</span> <ul> <li> <span>222</span> </li> <li> ...原创 2019-04-26 23:11:22 · 907 阅读 · 0 评论 -
CSS 成长之路(三)伪类选择器
伪类选择器用途用来修饰标签<a href= "#">xxx</a>修饰链接内容在未访问link、访问后visited、鼠标悬停时hover和鼠标点下未松开时active的状态。注意,这四个内容的顺序不可以调换,用的最多的未link和hover。类选择器:.类名伪类选择器:a:上述属性Show me the code将代码保存为.html结尾的文件并用浏览器产...原创 2019-04-26 23:24:12 · 175 阅读 · 0 评论 -
CSS 成长之路(四)显示模式与显示模式转换
显示模式块级元素——block如:div一个元素占一整行,可以改变大小行内元素——inline如:span可以多个占一行,不可以改变大小行内块元素——inline-block如:img可以多个占一行,可以改变大小显示模式转换——display转行内元素:display: inline;如div {display: inline;}转块级元素...原创 2019-04-28 10:55:20 · 140 阅读 · 0 评论 -
CSS 成长之路(五)文本垂直居中与设置背景图
文本垂直居中方法:盒内元素的行高等于盒子的高度即可完成文本的垂直居中。结果如下图:将如下代码复制保存为.html格式的文件,并用浏览器查看结果。注意第23与26行设置两者高度相同。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta ...原创 2019-04-28 11:23:04 · 319 阅读 · 0 评论 -
CSS 成长之路(六)顶线、中线、基线、底线与行距
示意图行距定义行距为上下两行基线与基线之间的距离。原创 2019-05-05 10:33:27 · 1884 阅读 · 0 评论 -
CSS 成长之路(七)层叠性、继承性与优先级
CSS三大特征性层叠性解决样式处理冲突的能力,如果对在多处定义同一部分,若各处的优先级相同,则按照最后的定义为准。继承性大多跟文字有关的特性如字号和颜色可以被继承,但高度不会被继承。优先级根据样式定义的方式不同,分为不同优先级,如果在多处对同一部分进行定义,则以优先级高的为准,若优先级相同,则按照层叠性。优先级可以叠加,对应位相加但是不进位。优先级从低到高为*方...原创 2019-05-05 10:44:56 · 161 阅读 · 0 评论 -
CSS 成长之路(八)背景图平铺,背景图位置与背景图滚动
背景图属性设置背景颜色background-color设置背景图background-image: url(IMAGE_PATH);这里路径为相对路径。是否平铺background-repeat平铺(默认):repeat不平铺:no-repeat横铺:repeat-x竖铺:repeat-y背景位置background-position:[A][空...原创 2019-05-05 11:20:26 · 820 阅读 · 0 评论 -
CSS 成长之路(九)边框及属性
边框及属性定义边框方式border-width border-style border-color三者缺一不可,或者连写为border: [A] [B] [C];缺一不可。A为边框宽度,单位px。B为边框样式实线:solid虚线:dashed更虚的线:dottedC为边框颜色如设置1像素的红色虚线框为:border: 1px solid red;...原创 2019-05-05 11:27:38 · 165 阅读 · 0 评论