CSS选择器和常用样式有哪些

本篇内容主要讲解“CSS选择器和常用样式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS选择器和常用样式有哪些”吧!

CSS的基本使用

• 直接写在标签内

<p style="color: red; font-size: 40px;">段落</p>

• 写在 style 标签内

<style>
    span{
        color: aquamarine;
    }
</style>

• 使用外部 .css 文件

  <style>
    @import "font_css.css";
  </style>

  <link rel="stylesheet" href="font_css.css">

• link

• @import （不建议使用此方式）

CSS选择器

• 优先级：id选择器 > class 选择器 > 标签选择器

• 标签选择器：标签名{}

• class选择器（“.”符号）：.class名{}

• id选择器（“#”符号，id 选择器唯一）：#id名{}

• 群组 选择器（“，”逗号分开）：

• 群组选择器可以同时选择多个标签

• p,div{...}

• 层次选择器

• 子代 （符号“>”）：div>p{...}

• 后代 (空格)：div p {...}

• 相邻 （符号“+”）：#p_id~span {...}

• 兄弟 （符号“~”）：#p_id~p {...}

• 伪类选择器（符号“:”）

• a:active {...}

• a:hover {...}

• a:visited {...}

• a:link {...}

• link：未访问过的样式

• visited：访问过后的样式

• hover：划过的样式

• active：激活的样式

字体

• 字体：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;
   

常用样式

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; 内联和块级切换/隐藏

到此，相信大家对“CSS选择器和常用样式有哪些”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！