前端基础之CSS（上）
第八章 css基础知识
? css
基础知识：
– css样式表的定义
– css：（Cascading Style Sheets）层叠样式表；
? 分类及位置：内部样式
-head
区域
style
标签里面
– 外部样式-link调用
– 内联样式-标签元素里面
? css内的注释：/*注释内容*/
? css
样式表的语法
– CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。
– 盒子名或者标签名
– CSS中几种颜色的表示方法
? 用颜色名表示
– 有17个预先确定的颜色，它们是
? aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow
– 用十六进制的颜色值表示(红、绿、蓝)
? #FF0000或者#F00
– 用rgb(r,g,b)函数表示
? 如：rgb(255,255,0)
– 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)
? 如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表 蓝色
– 用rgba(r,g,b,a)函数表示
? 其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明
– 用hsla(Hue,Saturation,Lightness,alpha)函数表示
? 色调、饱和度、亮度、透明度
– 例子
style="position:absolute;top:0px">
style="background-color:gray;">background-color:gray
style="background-color:#F00;">background-color:#F00
style="background-color:#ffff00;">background-color:#ffff00
style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)
style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)
style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)
style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)
? 内部样式表
– 当单个页面需要设置样式时，就应该使用内部样式表。
– 使用 标签在文档里面定义内部样式表
? 从外部引入到样式分为两种：（注意写在head标签里面）
? 当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。
? Link样式表式：
? Html式：
? 内联样式表（优先级高）
– 写在标签里面的样式
– 如：
? 表示给p标签里面的文字颜色设置为红色
? 区别：外链样式与导入样式
– link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
– 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。
– 兼容性的区别，因@import``CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。
– 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。
? 样式的优先级补充
– 相同权值情况下，
CSS
样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
? 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
? 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
? 层叠优先级是:
? 浏览器缺省
? 其中样式表又有:类选择器
? 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
? 浏览器缺省
? 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
– 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！
第九章 css选择器（上）
? css选择器：
– class类选择器可以重复利用
– id选择器唯一
? 标签选择器
– 什么是选择器：css选择器就是要改变样式的对象
? 选择器
? 标签选择器：页面中所有的标签都是一个选择器 p
? ID选择器
– 选择id命名的元素 以 # 开头 #p1
? 类选择器
– class选择器，选择clas命名的元素 以.开头 .first
? css代码写完后上线前要经过压缩处理
? 本地和服务器分两个css版本（备份）
? 压缩后注释都清除，空间体积减少
? 群组选择器
– 选择多个元素,以逗号隔开 #main,.first,span,a,h1
? 包含选择器
– 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开
p
? span
? 属性选择器
– 选择包含某一属性的元素
– a[title] 选择包含title的a标签
– a[title][href] 选择包含title和href的a标签
? > + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）
– p > span
? 相邻兄弟选择器：只选择后面的相邻兄弟元素
– p + span
第十章 css选择器（下）
? 伪类选择器
– a:link /* 未访问的链接 */ （只用于a标签）
– a:visited /* 已访问的链接 */ （只用于a标签）
– a:hover /* 鼠标移动到链接上
– */（可和其他标签结合一起用）
– a:active /* 选定的链接 */
– 注意
? 伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha
? 输入伪类选择器（针对表单）
– input:focus /* 键盘输入焦点 */
? 其他伪类选择器
– p:first-child /* 第一个p */
– :before 在元素之前添加内容。
– :after 在元素之后添加内容。
? css优先规则
– 内联样式表-> ID 选择器—> Class 类选择器->标签选择器
第十一章 背景属性
? 背景属性：
– 背景的添加 ：
– 背景颜色的添加:
? background:red;
? backgronnd-color:red;
– 背景图片的添加：
? background:url(?developer/news/147989/“images/1.jpg”);
? backgronnd-image:url(?developer/news/147989/“images/1.jpg”);
– 背景的平铺
– 什么是平铺？平铺就是图片是否重复出现
? 不平铺：background-repeat:no-repeat;
? 水平方向平铺：background-repeat:repeat-x;
? 垂直方向平铺：background-repeat:repeat-y;
? 完全平铺：默认为完全平铺
– 背景图片的定位
? 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
? background-position的取值可为英文单词或者数值和百分值。
? background-positon的英文单词取值
? top left
? top center
? top right
? center left
? center center
? center right
? bottom left
? bottom center
? ottom right
– background-positon的数值取值
? background-position:x y;
– positon的百分值取值
? background-position:x% y%;
– 背景图片的大小
? 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
– background-size的数值取值
? background-size:x y;
– background-size的数值取值
? background-size:x% y%;
– 背景图片的滚动
? 背景图片是否随着内容的滚动而滚动由background-attachment设置
? background-attachment:fixed; 固定，不随内容的滚动而滚动
? background-attachment:scroll; 滚动，随内容的滚动而滚动
第十二章 文字文本属性
? css文字文本属性：
– 文字属性
? color:red; 文字颜色
? font-size:12px; 文字大小
? font-weight:“bold” 文字粗细(bold/normal)
? font-family:“宋体” 文字字体
? font-variant:small-caps小写字母以大写字母显示
? 文本属性
– text-align:center; 文本对齐(right/left/center)
– line-height:10px; 行间距(可通过它实现文本的垂直居中)
– text-indent:20px; 首行缩进
– text-decoration:none;
? 文本线(none/underline/overline/line-through)
– letter-spacing: 字间距
IT技术大神∣小白到大神的进阶之路
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180316B1HOJ200?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
