当前位置:Gxlcms > 前端框架 > 关于前端学习之css

关于前端学习之css

时间:2021-07-01 10:21:17 帮助过:65人阅读

 学完CSS+Div的视频,感觉讲的挺清晰的,不看不知道,一看吓一跳,原来CSS可以为网页增色不少呢!

一、概述


1、格式:

20180914120611465.png

二、css 属性

1、文字属性

(1)font-style:italic(斜体)normal(正常);

(2)font-weight:bold/bolder/lighter(粗细),还可以用数字(100-900);

(3)font-size:20px,一定要带单位 px;

(4)font-family:"楷体";写中文要用引号;

  • 备用字体 font-family:"楷体","微软雅黑";

  • 中英文分别设置字体 font-family:"Arial","楷体"(英文字体在前,中文字体在后,这里的中文字体指能够处理中文的字体)

(5)文字属性的简写: font:style weight size family

  • style 和 weight 可以交换位置,size 和 family 可以交换位置,但是 size 和 family 一定要在最后;

  • style 和 weight 可以省略不写,但是 size 和 family 不能省略;

2、文本属性

(1)文本装饰:text-decoration:underline | overline | line-through | none;

(2)水平对齐:text-align:center;

(3)文本缩进:text-indent:2em;

3、颜色控制属性(color)

(1)英文:表达有限,用于调试;

(2)RGB(red ,green ,blue):取值0到255;三值一样为灰色;

(3)RGBA:前面和 rgb 一样,最后一个是透明度,取值0到1;

(4)十六进制:原理就是 rgb;两位16进制对一位 rgb;

(5)十六进制简写:

20180914145639745.png 必须是这个形式才能简写

三、css 选择器

1、标签选择器


  • 所有标签选中


2、id 选择器


  • id 唯一;



  • 字母、下划线和数字组成,数字不开头;


3、类选择器


  • class="类名 类名"(多类)


  • 多类应用:分类组合

4、后代选择器

  • 格式:tag tag{};

  • 上面的 tag 可以是标签、id 和 class 选择器;

  • 可以无限往下发展;

  • 后代包含子和孙;

5、子元素选择器

  • 格式:tag>tag{}

  • 不能有空格

6、交集选择器(*)

  • 格式:tagtag{}

  • 二者无任何符号

7、并集选择器

  • 格式:tag,tag{}

8、兄弟选择器

  • 相邻兄弟:+ 连接;只能选中同级相邻后面的一个且中间不能隔开

  • 通用兄弟:~ 连接;同级指定标签的后面,无论是否隔开

9、序选择器

相关推荐:

css样式 --- CSS hack

css+div总结【css+div】_html/css_WEB-ITnose

以上就是关于前端学习之css的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行