登录  /  注册
首页 > web前端 > css教程 > 正文

关于前端学习之css

坏嘻嘻
发布: 2018-09-14 16:43:04
原创
1181人浏览过

 学完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的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号