传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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语法
                         选择符
                    属性声明
                    括号
                    换行不敏感,空格不敏感
                    案例 3.png
                           4.png
4 . CSS简单属性
                    Width:设置宽度,单位px像素
                    Height:高度
                    Color:前景色,也就是文字的颜色
                    Background-color:背景色
                    Font-size:字体的大小
5 . CSS设置样式
                    设置p标签的背景色为红色
                    设置H1标签的字体颜色为绿色
                    设置span标签的文本为14像素
                   5.png
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
                            6.png
                      b、后代选择器(包含选择器)
                       后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代
                              7.png
                            c、并集选择器
                       并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器,class类选择器,id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
                            8.png
                         d、子元素选择器
                        子代选择器,是让CSS选择器智能选择儿子辈的元素。
                        例如,h1>strong{color:red;}
                        解读为:选择器h1>strong可以解释为”选择作为h1元素子元素的所有strong元素”。
                        尖括号和选择器之间可以有空格也可以没有,没有限制。
                        建议:选择器和尖括号间有空格
                              9.png
                      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;}



评分

参与人数 1黑马币 +3 收起 理由
chingven + 3 淡定

查看全部评分

分享至 : QQ空间
收藏

11 个回复

倒序浏览
干货!很赞很赞
回复 使用道具 举报
太棒了,顶起{:8_512:}
回复 使用道具 举报
回复 使用道具 举报
一目了然,超赞,楼主以后多多分享哦,感谢
回复 使用道具 举报
很不错的笔记
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报

O(∩_∩)O好的
回复 使用道具 举报
写的很不错,66666666666
回复 使用道具 举报

写的很不错,66666666666
回复 使用道具 举报
学习一下!~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条