CSS选择器、字体/文本、背景
程序员文章站
2022-03-21 17:34:20
CSS的基本使用 直接写在标签内 写在 style 标签内 使用外部 .css 文件 @import (不建议使用此方式) link CSS选择器 优先级:id选择器 class 选择器 标签选择器 标签选择器:标签名{} class选择器(“.”符号):.class名{} id选择器(“ ”符号, ......
css的基本使用
- 直接写在标签内
<p style="color: red; font-size: 40px;">段落</p>
- 写在 style 标签内
<style> span{ color: aquamarine; } </style>
- 使用外部 .css 文件
- @import (不建议使用此方式)
<style> @import "font_css.css"; </style>
- link
<link rel="stylesheet" href="font_css.css">
css选择器
- 优先级:id选择器 > class 选择器 > 标签选择器
- 标签选择器:标签名{}
- class选择器(“.”符号):.class名{}
- id选择器(“#”符号,id 选择器唯一):#id名{}
- 群组 选择器(“,”逗号分开):
- 群组选择器可以同时选择多个标签
- p,div{...}
- 层次选择器
- 子代 (符号“>”):div>p{...}
- 后代 (空格):div p {...}
- 相邻 (符号“+”):#p_id~span {...}
- 兄弟 (符号“~”):#p_id~p {...}
- 伪类选择器(符号“:”)
- link:未访问过的样式
- a:link {...}
- visited:访问过后的样式
- a:visited {...}
- hover:划过的样式
- a:hover {...}
- active:激活的样式
- a:active {...}
- link:未访问过的样式
字体
- 字体:font-family
- 字体大小:font-size
- 字体样式:font-style
- 字体粗细:font-weight
- 字体小大写:font-variant (将小写字母改为小型字体的大写字母)
- 复合样式:font (默认顺序:style variant weight size/height family)
文本
- 对齐方式:text-align
- 首行缩进:text-indent
- 文本线:text-decoration
- 字距:letter-spacing
- 词距:word-spacing
- 行高:line-height
背景
- 背景颜色:background-color
- 背景图片:background-image
- 背景铺盖:background-repeat
- 背景大小:background-size
- 背景定位:background-position
- 复合样式:background
- backgroud:red url(" ") no-repeat center;
- backgroud:red url(" ") no-repeat center;
常用样式
1. font-family:字体,eg: microsoft-yahei 2. font-size/color:字号/颜色 3. font-weight:bold 粗体 4. font-style:italic 斜体 5. text-decoration:underline 下划线 6. text-decoration:line-through 删除线 7. text-indent:2em 缩进文字的2倍大小 8. line-height:1.5em 行间距: 1.5倍文字大小 9. letter-spacing:50px 字间距,字母间距 10.word-spacing:50px 单词与单词间距 11.text-align:center/left/right 居中/居左/居右 12.color:rgb(255,255,255); 参数是0-255的数,可自调颜色 13.backgroud-image:url("1.png"); 背景图 14.backgroud-repeat:repeat-y/repeat-x/no-repeat; 图片按列/行/角排 15.backgroud-position:right center/center center; 图片位置靠右居中 16.以上可缩写为: backgroud: red url("1.png") no-repeat center; 17.border:solid 1px red;边框属性 18.ul, ol{list-style: 。。。。}列表属性 19.display:block/inline/none; 内联和块级切换/隐藏