第八章 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(“images/1.jpg”);
• backgronnd-image:url(“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技术大神∣小白到大神的进阶之路
领取专属 10元无门槛券
私享最新 技术干货