【黑马程序员重庆校区】前端基础入门第三阶段-CSS3基础与加强

CSS3基础与加强

1 . CSS的定义          1.01、什么是CSS?

CSS指层叠样式表(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等),图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排班等,而且还可以针对不同的浏览器设置不同的样式。

CSS就是控制页面布局和样式。

CSS的版本:2.1-3.0

         1.02、HTML和CSS的关系

                   HTML结构层负责从语义的角度搭建页面结构。

                   CSS样式层负责从审美的角度美化页面。

                   Javascript行为层负责从交互的角度提升用户体验。

2 . 如何编写CSS

         2.01、 缺省样式(浏览器样式)

                    可以通过设置修改浏览器的样式

                    所有的标签都有默认的样式:h1、h2、p、div、span、ul等

         2.02、内联样式style属性

                    <span style=”color:red;”></span>

         2.02、内嵌(嵌入、内部)样式,head标签中添加style标签

                   在head标签中添加style标签

                   <head>

                   <style>p{color:red;}</style>

                   </head>

         2.03、 外部样式,外联样式(link)

                    通过link标签引入css样式文件

                    <link rel=”stylesheet” href=”a.css”>

                    type属性:只有一个选项,”text/css”,指定当前为css文本文件

                    rel:指定当前HTML文件与CSS文件的关系是样式表。href:指定外联样式表的路径

                    导入样式:@import,导入样式会导致,CSS文件不能并行下载。不推荐使用。

3 . CSS语法

 选择符

属性声明

括号

换行不敏感,空格不敏感

                    案例: 


4 . CSS简单属性

                    Width:设置宽度,单位px像素

                    Height:高度

                    Color:前景色,也就是文字的颜色

                    Background-color:背景色

                    Font-size:字体的大小

5 . CSS设置样式

                    设置p标签的背景色为红色

                    设置H1标签的字体颜色为绿色

                    设置span标签的文本为14像素


6 . CSS选择器

         6.01、通配符选择器

                     通配符选择器用”*”号表示,他是所有选择器中作用范围最广的,能匹配页面中的所有的元素。其基本语法格式如下:

                    *{属性:1属性值!;属性2:属性值2;属性3:属性值3}

                     例如下面的代码,使用通配符选择器定义CSS样式,清楚所有HTML标记的默认边距。

                    *{margin:0;/*定义外边距*/Padding:0;/*定义内边距*/}

                     通配符的穿透力很强,优先级高于继承的样式,会覆盖继承的样式。一般不用。

         6.02、ID选择器命名规范

                     a、只允许出现字母(大小写均可,严格区分),下划线,数字,也就是说,id=”laoHe”和id=”laohe”不冲突

                     b、只允许以字母开头

                     c、命名没有长度限制,可以是1个字母,也可以是很多个。不过不建议太长。

                     d、不允许出现标签名(不是硬性规定,是有工作经验的表现)

                     注意:Id选择器的优先级非常高,所以确定在整个页面唯一出现时,才可以使用id选择器,不然因为优先级问题在后续维护中不能很好进行修改更新。

         6.03、类选择器

                     a、什么是类?

                          物以类聚,人以群分。比如:我们都是牛人,黄种人,白种人,欧洲人,亚洲人

                          所有的鸭子,所有的猫

                          所有的按钮,所有的图片,所有的侧边栏,所有的banner

                     b、类选择器,是对HTML标签中的class属性进行选择。CSS类选择器的选择符是”.”

                          例如:.demo{color:red:}

                     c、标签可以包含多个类选择器,在class标签中用空格隔开。

                          例如:

                          Html:<p class=”demo c2”>类标签选择器,传智前端学院</p>

                          Css:.demo{color:red;}

         6.04、ID选择器和class选择器的区别

                      a、相同的class属性值,可以在HTML中出现多次,ID属性值在页面中只能出现一次。

                      b、一个class的属性可以有多个值,也就是说一个标签可以有多个类。

                      建议大家尽量使用类选择器。使用ID时候情况:当确实能唯一确定当前页面中标签只会出现一次,这时候可以使用ID选择器。如果不能保证相同的作用的标签在页面中只出现一次,那么这时候就用类选择器。

6.05、CSS复合选择器

                      复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,具体如下:

a、标签指定式选择器(即..又..)

                      标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one


 b、后代选择器(包含选择器)

                       后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。


c、并集选择器

                       并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器,class类选择器,id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。


  d、子元素选择器

                        子代选择器,是让CSS选择器智能选择儿子辈的元素。

                        例如,h1>strong{color:red;}

                        解读为:选择器h1>strong可以解释为”选择作为h1元素子元素的所有strong元素”。

                        尖括号和选择器之间可以有空格也可以没有,没有限制。

                        建议:选择器和尖括号间有空格。


 e、属性选择器

                        简单属性选择:h1[class]{color:red;},选择所有拥有class属性的h1标签。

                        根据属性值选择:p[id=”aside”]{color:red;}

                        根据属性名相等选择。

                        属性名全包含:p[class~=”a”]{color:red;},只要包含属性,就被选择.ie6不支持.

                        属性模糊选择E[att^=”val”]{sRules}、E[att$=”val”]{sRules},选择具有att属性且属性值为以val开头(结尾)的字符串的E元素。

                        属性模糊匹配包含E[att*=”val”]{sRules},选择具有att属性且属性值为包含val的字符的E元素。

7 . CSS伪类

 :link

                       伪类将应用于未被访问过的链接,IE6不兼容,解决此问题,直接使用a标签

 :hover

                       伪类将应用于有鼠标指针悬停于其上的元素,在IE6只能应用于a链接,IE7所有元素都兼容

 :active

                       伪类将应用于被激活的元素,如被点击的链接,被按下的按钮等.

 :visited

                       伪类将应用于已经被访问过的链接.

 :focus

                       伪类将应用于拥有键盘输入焦点的元素.

8 . CSS伪元素

                      伪元素是控制内容

                      :first-line 伪元素

                      :first-letter 伪元素

                      注释:以上两个伪元素只能用于块级元素

                      :first-child 伪元素,选择属于第一个子元素的元素.

                      例如:span:first-child{}/*选择属于第一个子元素的所有span标签*/

                      :before与:after伪元素,可以设置元素之前之后的内容,并且配合content设置相关内容.比如:#demo:after,#demo:before{content:”--”;display:block;}


好消息好消息!

重庆的小伙伴福音来啦,前端与移动开发学科强势入驻传智播客·黑马程序员重庆中心            

    大前端时代,助你成为IT行业紧缺人才!

     开班时间:2019年8月13日

     首期班特惠:基础班免费,首期就业班减免1000元 !!  !


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,072评论 0 40
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0 0
  • CSS 指层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如 HTML 文档或...
    神齐阅读 2,090评论 0 14
  • 本文主要是讲述flink单机版的搭建及测试 前期准备jave要配置好,版本最好1,8以上 首先在官网下载需要的版本...
    堂哥000阅读 4,932评论 2 5
  • 我愿人生没有遗憾 我愿做个幸福的人 追寻日出 相随日落 我愿做个有理想的人 一分一秒都是希望 我愿做个感性的人 世...
    梓璐吖阅读 213评论 8 2