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

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

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册虚拟主机、营销软件、网站建设、云浮网站维护、网站推广。

CSS的基本使用

  • 直接写在标签内

段落

  • 写在 style 标签内

  • 使用外部 .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选择器和常用样式有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文名称:CSS选择器和常用样式有哪些
转载来于:http://ybzwz.com/article/igiejs.html