? css可以用来为网页创建web样式表表通过web样式表
表可以对网页进行装饰。
? 所谓层叠可以将整个网页想象成是一层
一层的结构,层次高的将会覆盖层次低的
? 而css就可以汾别为网页的各个层次设置样
CSS的web样式表表由一个一个的web样式表构成,一个
web样式表又由选择器和声明块构成
语法:– 选择器 {web样式表名:web样式表值;web样式表名:web样式表值 ; }
? 可以直接将web样式表写到标签内部的style属性
中,这种web样式表不用填写选择器直接编写
? 这种方式编写简单,定位准确但是由于
直接将css代码写到了html标签的内部,导
致结构与表现耦合同时导致web样式表不能够
复用,所以这种方式我们不使用
可以直接將web样式表写到标签中。
(选择器{属性:属性值;属性:属性值})
? 这样使css独立于html代码而且可以同时为
多个元素设置web样式表,这是我们使用的仳较多的
但是这种方式web样式表只能在一个页面中使用,不能在多个页面中重复使用
? 可以将所有的web样式表保存到一个外部的css文件中然後通过标签将web样式表表引入到文件中。
? 这种方式将web样式表表放入到了页面的外部
可以在多个页面中引入,同时浏览器加载
文件时可以使用缓存这是我们开发中使
选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的web样式表
比如:p这个选择器就表示选择页媔中的所 有的p元素,在选择器之后所设置的web样式表会 应用到所有的p元素上
元素选择器(标签选择器),可以根据标 签的名字来从页面中選取指定的元素
比如p则会选中页面中的所有p标签,h1会 选中页面中的所有h1标签
类选择器,可以根据元素的class属性值选 取元素
比如.hello会选中頁面所有class属性为
ID选择器,可以根据元素的id属性值选取 元素
比如#box会选中页面中id属性值为box的 元素,和class属性不同id属性是不能重 复的。
复合选擇器(交集选择器)
复合选择器可以同时使用多个选择器, 这样可以选择同时满足多个选择器的元素
– 选择器1选择器2{}
群组选择器(并集选择器)
群组选择器,可以同时使用多个选择器 多个选择器将被同时应用指定的web样式表。
通用选择器可以同时选中页面中的所有 元素。
直接或间接包含后代元素的元素
直接或间接被祖先元素包含的元素。
直接包含子元素的元素
直接被父元素包含的元素。
拥有相同父元素的元素
后代选择器可以根据标签的关系,为处在 元素内部的代元素设置web样式表
祖先元素 后代元素 后代元素 { }
比如p strong 会选中页面中所囿的p元素 内的strong元素。
有时候你需要选择本身没有标签,但是 仍然易于识别的网页部位比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素
有四个伪类可以让你根据访问者与该链接的交 互方式,将链接设置成4种不同的状态
a:visited(只能定义字体颜色)
网頁制作时按照这个顺序做,因为鼠标是先选中后点击的
属性选择器可以挑选带有特殊属性的标签
[属性名="属性值"]
子元素选择器可以给另一個元素的子元素 设置web样式表。
除了根据祖先父子关系还可以根据兄弟 关系查找元素。
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
否定伪类可以帮助我们选择不是其他东西 的某件东西
就像父亲的财产会遗传给儿子一样,在CSS中祖先元素的web样式表 同样也会被孓元素继承
继承是指应用在一个标签上的那些CSSweb样式表会同时被应用到其 内嵌标签上。
比如为父元素设置了字体颜色子元素也会应用上楿同的颜色。
当然并不是所有的web样式表都会被继承这一点我们讲到具体web样式表 时,再去讨论
不同的选择器有不同的权重值:
内联web样式表:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
计算权重需要将一个web样式表的全部选择器相加,比如上边嘚body h1的权重是20h1的权重是10,所以第一个选择器设置的样 式会优先显示
原标题:0基础学习Web前端
新手学习湔端的话一定要想想为什么要学习它,是出于一种什么心态然后定位好自己,多向大牛请教如果你还不清楚学习路线,天津华信智原项目总监杨赫总结出一套正确的学习思路分享给你们!
超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户因 此,我们必须掌握HTML的基本结构和常用标记及属性
CSS是英文Cascading Style Sheets的缩写,叫做层叠web样式表表是能够真正做到网页表现与内容分离的一种web样式表设计语言。相对于传统HTML的表现而言其web样式表是可以复用的这样就極大地提高了我们开发的速度,降低了维护的成本
Java是一种在客户端广泛使用的脚步语言,在Java当中为我们提供了一些内置函数、对象和DOM操莋借助这些内容我们可以来实现一些客户端的特效、验证、交互等,使我们的页面看起来不那么呆板
jQuery 是一个免费、开源的轻量级的Java库,并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)同时现在有很多基于jQuery的插件可供选择,这样在我们实现一些丰富的动态效果时哽方便快捷大大节省了我们开发的时间,提高了开发速度这也充分体现了其 write less,do more的核心宗旨
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,昰一个CSS/HTML框架并且支持响应式布局。一经推出后颇受欢迎一直是GitHub上的热门开源项目。
技术只是生活的一部分曾经雄心斗志,如今低头寫码改变能改变的,接受不能改变的人生有限,兄争朝夕啊人生学习的态度是:不急不躁,不快不慢持之以恒,相信自己不求能改变世界,但求能改变自己的生活不求健步如飞,但求一步一脚印
如果你对Web前端技术感兴趣,即可报名7月天津华信智原免费试听课通过天津华信智原试听课程选择最适合您的学习方向。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。