前端基础之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(“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技术大神∣小白到大神的进阶之路

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180316B1HOJ200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券