12.使用CSS样式表

12.1认识CSS

CSS-层叠样式表,目的是为网页上的元素精确定位,其次,它可以把网页上的内容结构和控制相分离

CSS可以更加精确地控制网页的内容形式,内容更加丰富,样式灵活多变

12.2使用CSS

1.基本语法

选择符{样式属性:取值;样式属性:取值;样式属性:取值;....}
  • 选择符(Selector):指这组样式编码要针对的对象,可以是一个XHTML标签,如body,hl,也可以是定义了特定id或class的标签

  • 属性(Property):对于每一个XHTML中的标签,CSS都提供了丰富的样式属性

  • 值(value):指定属性的值,两种类型,指定范围和指定数值

2.添加CSS方法

  • 链接外部样式表

通过link标签调用已经定义好的样式表,link标签处在head标签里面
rel=stylesheet是指在页面中使用外部的样式表
type=text/css是指文件的类型是样式表文件
href=style.css是文件所在位置

  • 内部样式表

一般位于head标签中

  • 导入外部样式表

注意使用时外部样式表的路径,方法和链接外部样式表的方法类似
但导入外部样式表输入方式更有优势,实质上它是相当于存在于内部样式表中

  • 内嵌样式

内嵌样式混合在HTML标记中使用
内前样式的使用是直接在HTML标记里添加style参数

12.3字体属性

font-family: "字体1","字体2",...

font-size: 大小的取值

font-style: 样式的取值

font-weight: 字体粗细值

font-variant: 取值

font: 字体取值
  • 在font-family里面定义了多种字体,浏览器会由前向后选择字体,如果都不支持,则会采用系统默认的字体

  • font-size取值:

    font-size取值

  • font-style取值:
    normal:默认的正常字体
    italic:以斜体显示文字
    oblique:属于中间状态

  • font-weight取值:
    normal:正常粗细
    bold:粗体
    bolder:特粗体
    lighter:特细体
    number:100~900,通常正百取值

  • font-variant取值:
    normal:正常显示
    small-caps: 将小写英文字母转化为大写并且字体较小

  • 字体复合属性

.h{
    font: bold italic "宋体"
}

各值之间用空格相连

12.4颜色和背景属性

color: 颜色取值

background-color: 颜色取值

background-image: url(图像地址)

background-repeat: 取值

background-attachment: scroll/fixed

background-postion: 位置取值

background: 取值
  • 颜色的取值一般用16进制

  • 图像的地址可以是相对地址也可以是绝对地址

  • background-repeat:
    no-repeat:背景图像不平铺
    repeat:背景图像平铺
    repeat-x:背景图像只在水平方向平铺
    repeat-y:背景图像只在垂直方向平铺

  • background-attachment:
    scroll:背景图像随对象滚动而滚动,默认选项
    fixed:背景图像固定在页面上不动

  • background-postion:

    长度设置值

百分比设置值
关键字设置值
  • 背景复合属性
background : url(...) no-repeat left top;

各值之间用空格相连

12.5段落属性

word-spacing: 取值

letter-spacing: 取值

text-decoration: 取值

vertical-align: 排列取值

text-transform: 转换值

text-align: 排列值

text-index: 缩进值

line-height: 行高值

white-space: 值

unicode-bidi: bidi-override,normal,embed

direction: ltr,rtl,inherit
  • 单词间隔word-spacing:
    normal:默认值
    数值:可以为负

  • 字符间隔letter-spacing:
    normal:默认值
    数值:可以为负

  • 文字修饰text-decoration:
    none:不修饰,默认值
    underline:添加下划线
    overline:添加上划线
    line-through:添加删除线
    blink:文字闪烁效果

  • 垂直对齐方式vertical-align:
    baseline:浏览器默认的垂直对齐方式
    sub:文字的下标
    super:文字的上标
    top:垂直靠上对齐
    text-top:使元素和上级元素的字体向上对齐
    middle:垂直居中对齐
    text-bottom:使元素和上级元素的字体向下对齐

  • 文本转换text-transform:
    none:表示使用原始值
    capitalize:每个单词的第一个字母大写
    uppercase:每个单词的所有字母大写
    lowercase:每个单词的所以字母小写

  • 水平对齐方式text-align:
    left:左对齐
    right:右对齐
    center:居中对齐
    justify:两端对齐

  • 文本缩进text-index:
    文本的缩进值必须是一个长度值或一个百分比

  • 文本行高line-height:
    行高值可以为长度,倍数或百分比

  • 处理空白white-space:
    normal:默认,将连续的多个空格合并
    pre:导致源代码中的空格和换行符会被保留
    nowrap:强制在同一行显示所有文本,直到文本结束或者遇到

  • 文本反排unicode-bidi,direction

unicode-bidi,direction经常一起使用,用来设置对象的阅读顺序

unicode-bidi
bidi-override:严格按照direction的值重排序
normal:默认值
embed:对象打开附加的嵌入层 direction的值指定嵌入层,在对象内部进行隐式重排序

direction
ltr:从左到右顺序阅读
rtl:从右到左顺序阅读
inherit:文本流的值不可继承

12.6外边距与内边距属性

盒子模型
  • 内容区:盒子模型的中心,呈现了盒子的主要信息内容,内容区是盒子模型必备的组成部分,其他的三部分都是可选的
    属性:width,height,overflow
    使用属性可以指定盒子内容区的高度和宽度

  • 内边距:是内容区和边框之间的空间,可以被看做是内容区的背景区域
    属性:padding,padding-top,padding-bottom,padding-left,padding-right
    使用属性可以指定内容区与各方向边框的距,同时对盒子背景色属性的设置可以使内边距部分呈现相应的颜色,起到一定的变现效果

  • 边框:
    属性:border,border-style,border-width和border-color

  • 外边距:外边距位于盒子的最外围,它不是一条线而是添加在边框外面的空间,外边距使得盒子之间不必紧凑的连接在一起
    属性:margin,margin-top,margin-bottom,margin-left,margin-right
    其具体设置和使用与内边距属性相似

12.6.1外边距margin

长度值:绝对边距值
百分比:相对上级元素
auto:自动取边距值
margin的值可以取一个或四个

12.6.2内边距padding

长度值:绝对边距值
百分比:相对上级元素
padding值可以取一个或四个

12.6.3边框border

  • border-style

    边框样式取值

  • border-width
    medium:默认宽度
    thin:小于默认宽度
    thick:大于默认宽度
    长度:数字和单位,不可为负

  • border-color
    可以用16种颜色的关键字或RGB值来设置

  • border
    使用border属性可以设置元素的边框样式,宽度和颜色

12.7定位属性

12.7.1定位方式postion

postion: static | absolute | fixed | relative
  • static:默认值

  • absolute:绝对定位,需要同时使用left,right,top和bottom等属性进行绝对定位

  • fixed:当页面滚动时,元素不随着滚动

  • relative:相对定位,对象不可层叠

12.7.2元素位置left,right,top和bottom

left: auto | 长度值 | 百分比
right: auto | 长度值 | 百分比
top: auto | 长度值 | 百分比
bottom: auto | 长度值 | 百分比

12.7.3层叠顺序

z-index: auto | 数字

12.7.4浮动属性

float: none | left | right

使用float可以设置文字在某个元素的周围,它能应用于所有的元素

  • none:默认值,表示对象浮动
  • left:表示文字浮动在元素的右边
  • right:表示文字浮动在元素的左边
12.7.5清除属性clear
clear:none | left | right | both

用于指定一个元素是否允许有其他元素漂浮在它的周围

  • none:默认值,允许两边都可以有浮动对象
  • left:不允许左边有浮动对象
  • right:不允许右边有浮动对象
  • both:不允许有浮动对象

12.7.6可视区域clip

clip: auto | rect(数字)

使用clip可以限定只显示裁切出来的区域

  • auto表示对象不裁剪
  • rect表示它根据提供的数值计算

12.7.7层的宽度和高度width,height

width: auto | 长度值
height: auto | 长度值

12.7.8超出范围overflow

overflow: visible | auto | hidden | scroll

设置当层内的内容超出所能容纳的范围时的显示方式

  • visible:表示层的大小和内容都会自动显示出来
  • auto:表示只在内容超出层的范围时才显示滚动条
  • hidden:表示会隐藏超出范围的内容
  • scroll:表示总是显示滚动条

12.7.9可见属性visibility

visibility: inherit | visible | hidden

针对嵌套层,插入其它层中的层

  • inherit:默认值,继承父对象的可见性
  • visible:无论父对象是否可见,子层都可见
  • hidden:无论父对象是否可见,子层都隐藏

12.8列表属性

list-style-type: 值

list-style-image: none | url(图像地址)

list-style-postion: outside | inside

list-style
  • list-style-type:设置列表项所使用的符号类型

    type的取值

  • list-style-image:
    none:不指定图像
    url:图像地

  • list-style-postion:
    outside:列表项目标记放在文本以外,且环绕文本不根据标记对齐
    inside:列表项目标记放在文本以内,且环绕文本根据标记对齐

  • list-style列表复合属性
    list-style-type和list-style-image都被指定时,list-style-image优先

12.9光标属性cursor

cursor: auto | 形状取值 | url(图像地址)

设置在对象上移动时鼠标指针采用的光标形状

可供选择的形状

12.10滤镜属性

12.10.1不透明度alpha

设置对象的透明度,使图片产生透明渐变效果

filter:alpha(参数 1=参数值, 参数 2=参数值, ...)
alpha属性的参数

12.10.2动感模糊blur

用于设置对象的动态模糊效果

filter:blur(add=参数值, direction=参数值, strength=参数值)
blur属性的参数

12.10.3对颜色进行透明处理chroma

chroma滤镜的作用是将图片中的某种颜色转化为透明色,产生透明效果

filter: chroma(color=颜色代码或颜色关键字)

12.10.4阴影效果dropShadow

dropShadow滤镜用于设置在指定的方向上和位置上产生阴影效果

dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值)
  • color: 控制阴影颜色
  • ** offX,offY分别设置阴影相对于原始图像移动的水平距离和垂直距离**
  • positive:设置阴影是否透明

12.10.5对象翻转flipH,flipV

flipH用于设置沿水平方向翻转对象,flipV用于设置沿垂直方向翻转对象

filter: FlipH
filter: FlipV

12.10.6发光效果glow

glow滤镜用于设置在对象周围产生发光的效果

filter: Glow(color=颜色代码,strength=强度值)

color用于设置发光的颜色
strength用于设置发光的强度,取值范围为1~255,默认值为5

12.10.7灰度处理gray

gray滤镜用于把彩色图片中的色彩去掉,转化为黑白色图片

filter: gray

12.10.8反相invert

invert滤镜用于设置对象反相,可以将图片的颜色,饱和度,以及亮度完全反转过来

filter: invert

12.10.9X光片效果xray

xray滤镜用于制作类似X光片的效果

filter: xray

12.10.10遮罩效果mask

mask滤镜用于产生遮罩效果,可以做出像印章一样的效果

filter: Mask(Color=颜色代码)

12.10.11波形滤镜wave

wave滤镜用于为对象内容创波纹扭曲效果

filter: wave(add=参数值, freq=参数值, lightstrength=参数值, 
                     phase=参数值, strength=参数值);

add:设置是否要把对象按照波形样式打乱
freq:设置图片上的波浪数目
lightstrength:设置波浪的光照强度,取值范围为0~100
phase:设置波浪的起始位置
strength:设置波浪的的强度大小

你可能感兴趣的:(12.使用CSS样式表)