验证中...
Languages: HTML/CSS
Categories: CSS 技巧
Latest update 2019-03-22 20:35
CSS(层叠样式表) : 美化网页,动画 四种方式:
Raw Copy
CSS(层叠样式表) : 美化网页,动画
四种方式:
行内样式:<p style="color:red;">123</p>
内嵌样式:<head>
<style>
p{color:red;}
</style>
</head>
链接样式:<head>
<link rel="stylesheet" href="xx.css">
</head>
导入样式:<style>@import "xx.css";</style>
优先级:(就近原则)
行内样式>内嵌>导入>链接
-------------
面试题:链接样式与导入样式的区别?
链接样式是让两个文件产生关联
导入样式是让两个文件合并(将css文件合并到html文件中)
========================================
选择器(选择符) : selector
基础选择符:
*{color:red;} /* 注释:通配符选择器,代表页面上所有标签 */
a{color:blue;} /* 将页面上所有a标签都设置成蓝色*/
.abc{color:pink;} /*将abc这一类的标签设置成粉红色*/
<p class="abc"></p>
#me{color:green;} /*将id是me的那个标签设置成绿色*/
<p id="me"></p>
优先级:
ID选择器>类选择器>元素选择器>*
=========================================
关系型选择符:
后代选择器:
div a{color:red;} /*div范围内所有a都设置为红色;*/
子级选择器:
div>a{color:red;} /*div的子级a标签设置为红色*/
相邻兄弟选择器:
a+p{color:red;} /*紧挨着a标签的p标签设置为红色*/
兄弟选择器:
a~p{color:red;} /*与a同级的p标签设置为红色*/
群组选择器:
选择器1,选择器2,选择器N{color:red;}
/*通过多个选择器来设置同一种样式*/
===========================================
安装一个字体:
1. 百度搜索:字体下载大宝库,下载压缩包。
2. 找到里面的ttf文件
3. 双击打开=》安装
4. 打开word搜索字体
===========================================
font-family:字体1,字体2,字体N;
如果当前浏览器支持字体1,则显示字体1,如果不支持则找下一个.
---------------
font-size:20px;
文字大小,默认16px。em单位代表父元素px的倍数
---------------
font-style:normal / italic;
normal:正常 ;italic:斜体
---------------
font-weight:lighter/bold/bolder;
细、粗、更粗(考虑本来字体的粗细去调节)
---------------
行高:基线之间的距离。
作用:
1.设置多行之间的行间距
div{line-height:30px;} /* 固定行间距 */
div{line-height:1.5;} /* 行间距=1.5*font-size */
2.让文字垂直居中
div{height:100px;line-height:100px;}
3.文字上下位置偏移
--------------
词间距:只能处理英文,因为它是通过单词之间的空格来判断的
word-spacing:10px;
-------------
字间距:英文,中文等
letter-spacing:5px;
-----------------------------------------
font的简写形式:
font: size/lineHeight font-famlily;
font: 10px/20px Apri;
-----------------------------------------
开发者工具:F12 / 鼠标右键->检查
Elements
-----------------------------------------
水平对齐方式:
text-align: left/right/center/justify(两端对齐-两边尽可能对齐);
-----------------------------------------
文字的线
text-decoration:underline; /* 下划线 */
text-decoration:overline; /* 上划线 */
text-decoration:line-through; /* 删除线 */
text-decoration:none; /* 不要任何线 */
-----------------------------------------
颜色:
color:red; /* 英文 */
color:#ff0000; or #f00 /* 16进制数 */
color:rgb(255,0,0);
color:rgba(255,0,0,0.5); /* 半透明的大红色 */
r:红色;g:绿色;b:蓝色:a:不透明度(0完全透明-1完全不透明)
-----------------------------------------
首行文本缩进
text-indent:2em; /*首行缩进2个字的宽度*/

Comment list( 0 )

You need to Sign in for post a comment

Help Search

183227_9af5e6a8_1826025 111910_4d91f001_1826025