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

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

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

CSS的基本使用

• 直接写在标签内

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

• 写在 style 标签内

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

• 使用外部 .css 文件

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

  <linkrel="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-Yahei2.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:rightcenter/centercenter;图片位置靠右居中16.以上可缩写为:backgroud:redurl("1.png")no-repeatcenter;17.border:solid1pxred;边框属性18.ul,ol{list-style:。。。。}列表属性19.display:block/inline/none;内联和块级切换/隐藏

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