HTML、CSS常用单词汇总

html-css017

HTML、CSS常用单词汇总,第1张

A

absolute 绝对的active 活动的,激活的, 标记的一个伪类

align 对齐

alpha 透明度,半透明anchor 锚记 标记是这个单词的缩写

arrow 箭头

auto 自动

B

background 背景border 边框

banner 页面上的一个横条both 二者都是clear 属性的一个属性值

black 黑色bottom 底部,是一个CSS 属性

blink 闪烁box 盒子

block 块br 换行标记

blue 蓝色

bug 软件程序中的错误

body 主体,一个HTML 标记

building 建立

bold 粗体

button 按钮

C

cell 表格的单元格

color 颜色

center 中间,居中

contact 联系

child 孩子

content 内容

circle 圆圈

class 类别

css 层叠样式表

clear 清除

cursor 鼠标指针

cm 厘米

D

dashed 虚线

display 显示,CSS 的一个属

div 就是这个单词的缩写

decoration 装饰

document 文档

default 默认的

dotted 点线

double 双线

E

element 元素

F

father 父亲float 浮动

filter 滤镜,过滤器font 字体

first 第一个for 在循环语句中的一个保留字

fixed 固定的four 4 个

G

gif 一种图像格式green 绿色

gray 灰色

H

hack 常用于CSS 中的一些招数,或者类似于偏方的技巧

here 这里

hand 手

hidden 被隐藏

head 头部

home 首页

height 高度

horizontal 水平的

help 帮助

hover 鼠标指针经过时的效果,或称为“悬停状态”

I

Image 图像

inline 行内

important 重要的

inner 内部的

indent 缩进

italic 意大利体,斜体

index 索引

J

jpg 一种图像格式justify 两端对齐

L

language 语言

line 线

last 最后一个

link 链接

left 左边

list 列表

length 长度

M

margin 外边距

millimeter 毫米

max 最大的

min 最小的

medium 中间

model 模型

menu 菜单

move 移动

middle 中间

N

navigation 导航

none 无,不,没有

new 新的

O

object 对象

orange 橙色

one 一个

outer 外面的

only 仅仅

overflow 溢出

open 打开

P

padding 内边距

point 点

pointer 指针,指示器

purple 紫色

position 定位,位置

R

red 红色

resize 重新设置大小

relative 相对的

right 右边

repeat 重复,平铺

row 行

S

scroll 滚动

silver 银色

size 尺寸

square 方块

solid 固体,实线

static 静态的

solution 方案

strong 强壮,加粗的

son 儿子

style 样式

span 一个HTML 标记

T

table 表格title 标题

td 单元格的HTML 标记

top 顶部

text 文本

tr 表格中“行”的HTML 标记

transitional 过渡的

two 两个

three 三个type 类型

through 穿过

U

underline 下划线

uppercase 大写

upper 上面的

url 网址

V

vertical 竖直的

visited 访问过的

W

white 白色

width 宽度

Y

yellow 黄色

网页主题字体颜色是指body吗?一般写网页都要在body里写上网页的整体字体颜色,然后根据里面不同的地方的要求不同再另外设置或者覆盖,如果是这样的结构:

<body>

主题颜色为黑

<div class="zt">内部颜色是红</div>

</body>

那么css可以这样写:

body{ color:#000}

.zt{ color:red}

如果你说的html结构是这样:

<div class="zt">主题颜色为黑 <p>内部颜色是红</p></div>

那么css这样写就可以

.zt{ color:#000}

.zt p{ color:red}

当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。

CSS 的继承性

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:

<div>

<p></p></div>

如果 <div> 有个属性 color: red,则这个属性将被 <p> 继承,即 <p> 也拥有属性 color: red。

由上可见,当网页比较复杂, HTML 结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。影响的规则是:

CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。

例1:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">

<div style="color: blue">

<div class="son"></div>

</div></div>

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式",那么"直接样式"就是一个标签直接拥有的属性。又有如下规则:

CSS 优先规则2:"直接样式"比"祖先样式"优先级高。

例2:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">

<div class="son" style="color: blue"></div></div>

选择器的优先级

上面讨论了一个标签从祖先继承来的属性,现在讨论标签自有的属性。在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器:

ID 选择器, 如 #id{}

类选择器, 如 .class{}

属性选择器, 如 a[href="segmentfault.com"]{}

伪类选择器, 如 :hover{}

伪元素选择器, 如 ::before{}

标签选择器, 如 span{}

通配选择器, 如 *{}

CSS 优先规则3:优先级关系:内联样式 >ID 选择器 >类选择器 = 属性选择器 = 伪类选择器 >标签选择器 = 伪元素选择器

例3:

// HTML<div class="content-class" id="content-id" style="color: black"></div>// CSS#content-id {

   color: red}.content-class {

   color: blue}div {

   color: grey}

最终的 color 为 black,因为内联样式比其他选择器的优先级高。

所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有 3 种:

后代选择符: .father .child{}

子选择符: .father >.child{}

相邻选择符: .bro1 + .bro2{}

当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:

CSS 优先规则4:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。

例4:

// HTML<div id="con-id">

   <span class="con-span"></span></div>// CSS#con-id span {

   color: red}div .con-span {

   color: blue}

由规则 4 可见,<span>的 color 为 red。

如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢?这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高,其实这仍然可以用规则 4 来解释。

例5:

// HTML<link rel="stylesheet" type="text/css" href="style-link.css"><style type="text/css">@import url(style-import.css)div {

   background: blue}</style><div></div>// style-link.cssdiv {

   background: lime}// style-import.cssdiv {

   background: grey}

从顺序上看,内部样式在最下面,被最晚引用,所以 <div>的背景色为 blue。

上面代码中,@import 语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件,原因见另一篇博客:CSS 引入方式。

CSS 还提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。

CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。

例6:

// HTML<div class="father">

   <p class="son"></p></div>// CSSp {

   background: red !important}.father .son {

   background: blue}

虽然 .father .son 拥有更高的权值,但选择器 p 中的 background 属性被插入了 !important, 所以 <p>的 background 为 red。

错误的说法

在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 >100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。