CSS3笔记

一、CSS3基础知识

1. CSS3基本语法

selector { property1:value1; proterty2:value2; }
/*或*/
selector { 
	property1:value1; 
	proterty2:value2;
}
/*多个选择器使用相同的声明区块*/
selector1, selector2 { 
	property1:value1; 
	proterty2:value2;
}

2. CSS引入方式

  1. 行内样式
 <div style="
      width:100px;
      height:100px;
      background-color: red;
 "></div>
  1. 内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background-color: greenyellow;
        }
    </style>
</head>
</html>
  1. 外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
    	@import url(test.css);
    </style>
</head>
</html>

3. 字体

属性:

  • font-family: 设置字体名称,可指定多个字体名称,用逗号隔开,在前面的字体名称优先级高
  • font-size: 设置字号大小 (1em = 16px)
  • font-style: 设置三种字体样式:normal(正常)italic(斜体)oblique(倾斜体)
  • font-variant: 默认值为normal,值为small-caps时小写英文字母以小型大写字母显示
  • font-weight: 设置字体粗细。有以下取值:normal(400)bold(700)bolderlighter100, 200, … , 800, 900
  • font-size-adjust: 设置字体宽高比
  • font: 依序设定属性值:style variant weight size family(省略某一项则使用默认值)
  • @font-face: 提供服务器端字体供浏览器下载

4. 属性选择器

用于将具有某种属性,不论其为何值的所有元素套用该样式。

语法

/*所有属性有classname字段的元素,不论classname值为何,均套用该样式,其中*可省略*/
*[classname] {
	...
}
/*为所有属性有classname字段值为value的元素套用该样式*/
*[classname="value"] {
	...
}

5. 虚拟选择器

1.链接虚拟类别 :link:visited

  • :link: 尚未被单击时可以套用该样式
  • :visited: 已被单击时可以套用该样式

2.动作虚拟类别 :hover :active:focus

  • :hover: 鼠标指针位于超链接字符或在此元素上时可以套用该样式
  • :active: 单击时可以套用该样式
  • :focus: 获得焦点时可以套用该样式

3.目的虚拟类别 :target

  • :target: 为移动的目标套用该样式

二、段落文字编排

1. 对齐方式 text-align 属性

text-align: left | right | center | justify | initial | inherit
  • left: 靠左对齐
  • right: 靠右对齐
  • center: 居中对齐
  • justify: 左右对齐
  • initial: 使用默认设置
  • inherit: 继承父元素属性

2. 首行缩排 text-indent 属性

text-indent: length | % | initial | inherit
  • length: 使用cm、px、pt、em等单位设定固定长度,默认值为0
  • %: 缩排父元素宽度的百分比
  • initial: 使用默认设置
  • inherit: 继承父元素属性

3. 行高 line-height 属性

line-height: normal | number | length | % | inherit
  • normal: 默认值
  • number: 设置数值,将与当前字体尺寸相乘的结果作为行高值
  • length: 使用cm、px、pt等单位设定固定长度
  • %: 设置依照当前字体尺寸的百分比
  • inherit: 继承父元素属性

4. 字符间距 letter-spacing 属性

letter-spacing: normal | length | initial | inherit
  • normal: 默认值,没有额外空间
  • length: 设值固定的字符间距,可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

5. 文字间距 word-spacing 属性

word-spacing: normal | length | initial | inherit
  • normal: 默认值,文字间距为 0.25em(4px)
  • length: 设值额外文字的间距,可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

6. 处理空格 white-space 属性

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit
  • normal: 默认值,浏览器会忽略空白
  • nowrap: 文本不换行,直到遇到 <br> 元素
  • pre: 保留空白,类似于html的 <pre> 元素
  • pre-line: 合并空白符,使文件正常换行
  • pre-wrap: 设定保留空白符,在浏览器中可以正常换行
  • initial: 使用默认设置
  • inherit: 继承父元素属性

7. 大小写转换 text-transform 属性

text-transform: none | capitalize | uppercase | lowercase | initial | inherit
  • none: 默认值,保留文字原本样式
  • capitalize: 第一个字母大写
  • uppercase: 字母全部转成大写
  • lowercase: 字母全部转成小写
  • initial: 使用默认设置
  • inherit: 继承父元素属性

8. 文字阴影 text-shadow 属性

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit
  • h-shadow: 水平阴影,右正左负,不可省略
  • v-shadow: 垂直阴影,下正上负,不可省略
  • blur-radius: 模糊范围,单位和h-shadow相同,可省略
  • color: 阴影颜色,可省略
  • none: 默认值,即无阴影
  • initial: 使用默认设置
  • inherit: 继承父元素属性

9. 线条装饰 text-decoration 属性

text-decoration: none | underline | overline | line-through | initial | inherit
  • none: 默认值,即正常显示
  • underline: 底线
  • overline: 顶线
  • line-through: 删除线
  • initial: 使用默认设置
  • inherit: 继承父元素属性

10. 制表符宽度 tab-size 属性

tab-size: number | length | initial | inherit
  • number: 设置宽度数值,默认值为8,即8个英文字符宽度
  • length: 设值制表符长度
  • initial: 使用默认设置
  • inherit: 继承父元素属性

11. 换行 word-wrap 属性

word-wrap: normal | break-word
  • normal: 默认值,只在可以换行的地方换行,否则显示到结束为止
  • break-word: 可用于将较长的单字或URL网址中途换行

12. 溢出 text-overflow 属性

text-overflow: clip | ellipsis | string | initial | inherit
  • clip: 超出显示区不予显示
  • ellipsis: 超出显示区以“…”显示
  • string: 使用给定的字符串替换被隐藏的文本
  • initial: 使用默认设置
  • inherit: 继承父元素属性
匿名

发表评论

匿名网友