分类
前端

html css

css 简介

css 简介

层叠样式表(Cascading Style Sheet,CSS)

基本语法:

继承:

继承不起作用的有:边框、边距、填充、背景、表格等。

样式表的定义与使用

  • 定义标记的style属性
    <标记 style="属性:属性值;属性:属性值">
  • 定义内部样式表
  • 嵌入外部样式表
    @import应该放在style标记的任何其他样式规则前

  • 链接外部样式表
    外部样式表优先级低于内部样式表

定义选择符

  • 按标记名称选择
  • 按照id和class选择元素
  • 按上下文选择
    祖先元素 [祖先元素 ……] 显示元素 {属性名 = 属性值; ……}
  • 选择元素的一部分
    例如,第一个字母或第一行加样式:
    p:first-letter{font-size:26px;color:#ff0066;}
    p:first-line{font-size:26px;color:#ff0066;}
  • 指定元素组(多个元素使用同一样式,用 , 分隔)

文字与排版样式

长度、百分比单位:

长度常用(px、ex)
百分比(相对于ex)

文字

文字样式 说明
font-family:字体1,字体2,…… 设置字体
font-size:绝对大小 | 相对大小 设置字号
绝对大小:xx-small | x-small | small | medium | large | x-large | xx-large
font-style:normal | italic | oblique 字体样式 :默认 斜体 歪斜体
font-weight:normal | bold | bolder | lighter | 100-900 字体加粗 : 100-900 数字越大越粗
font-variant:normal | small-caps 字体变体,英文专用:small-caps(小型大写字母)
text-decoration:underline | overline | line-through | blink | none 字体效果
underline 下下划线、overline 上下划线、line-through 删除线、blink 闪烁(仅netscape浏览器支持)

综合字体属性

前三个属性次序不定或省略
大小与字体系列必须显式指出,先设置大小,后设置字体
行高必须直接出现在字体大小后面,中间用斜杠分开,可选

排版样式属性

排版样式 说明
text-indent:长度单位 | 百分比 首行缩进
letter-spacing:normal | 长度单位 字符间距 (可为负数)
word-spacing:normal | 长度单位 汉字间距 (可为负数)
line-height:normal | 比例 | 长度单位 | 百分比 行距 (可为负数)
text-align:left | right | center | justify 水平对齐属性
text-transform:uppercase | lowercase | capitalize | none 转换英文大小写
uppercase 所有字母大写、lowercase 所有字母小写、capitalize 每个单词首字母大写

背景与颜色

设置颜色的方法

设置颜色的方法:
- 十六进制数
- 颜色名称

定义颜色的方法:
- 十六进制数
- RGB函数(整数)
- RGB函数(百分比)
- 颜色名称

背景颜色属性

transparent 透明

背景图片属性

背景图片

url(图片位置)

背景附件

scroll 随滚动条滚动(默认)
fixed 不动

设置重复背景图片

repeat 水平 竖直 平铺
repeat-x 水平 平铺 repeat-y 竖直 平铺

背景图片位置

指定两个值 一个水平位置 一个竖直位置
关键字 : 水平 left center right、竖直 top center bottom

美化网页与超链接

网页链接属性

网页链接属性 说明
a:link 未链接时 文字样式
a:visited 已链接过 文字样式
a:active 单击后 文字样式
a:hover 鼠标移动上 文字样式
a 上述4种同时引用

滚动条属性

滚动条属性 说明
scrollbar-face-color A区域颜色
scrollbar-shadow-color A区域阴影颜色
scrollbar-highlight-color A区域边框颜色
scrollbar-3dlight-color A区域3D光影
scrollbar-darkshadow-color A区域3D阴影
scrollbar-track-color B区域滚动条轨道颜色
scrollbar-arrow-color A区域内小三角颜色

假设滚动条所有区域为A区,去掉小三角为B区

光标属性

描述
auto 默认。浏览器设置的光标。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。
no-drop 无法释放
text 此光标指示文本。
move 此光标指示某对象可被移动。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
s-resize 此光标指示矩形框的边缘可被向下移动(北/西)。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
not-allowed 禁止
progress 处理中
default 默认光标(通常是一个箭头)
url("光标文件地址") 需被使用的自定义光标的URL
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)

矩形模块

设置边界

设置元素边框

边框样式属性

border-style:一个值 全、两个值 上 下、三个值 上 右左 下、四个值 上 右 下 左

样式值 说明 - 样式值 说明
none 不显示边框,默认 - groove 凹形线
dotted 点线 - ridge 凸形线
dashed 虚线 - inset 嵌入式
solid 实线 - outset 嵌出式
double 双直线 - - -

边框宽度属性

thin 细 、medium 中等、thick 粗 ;length 表示长度单位

边框色彩属性

边框综合属性

元素内边界

列表

列表样式

属性值 说明
disc circle suqare 黑圆点 空心圆 黑方块
decimal 数字
lower-roman upper-roman 小写罗马 大写罗马
lower-alpha upper-alpha 小写字母 大写字母
none 不显示

图像列表

列表符号缩进

inside :不向外凸出
outside:向外凸出 默认

css 进阶

div 标记的使用

html容器

div属性 说明
position 定位方式:static 静态定位(默认)、absolute 绝对定位、relative 相对定位、fixed 固定定位
top bottom right left 位置:auto、长度值、百分比
float 浮动:left、right、none
clear 清除:left(左边不允许有浮动)、right、both、none
z-index 层空间:auto、数字
visibility 可见性:visible 可见、hidden 隐藏
display 如何显示元素:block、inline、list-item、none

span元素使用

行内元素

发表评论

电子邮件地址不会被公开。 必填项已用*标注