css不继承父类样式_css知识点

最新推荐文章于 2022-11-17 14:34:30 发布

weixin_39628864

最新推荐文章于 2022-11-17 14:34:30 发布

阅读量2.6k

点赞数

文章标签： css不继承父类样式 css删除线

CSS只层叠样式表
CSS样式是表现，改变网页的呈现效果。CSS内部样式（使用<style></style>标签在文档<head></head>里面定义内部样式表）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*CSS样式填充*/
</style>
</head>
<body>
</body>
</html>CSS外部样式（外部样式用link调用）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
*（链接样式的名称）{
效果代码
}
CSS样式表有两个主要部分构成：要添加样式的盒子名或者标签名，以及要添加的样式。
盒子名或者标签名{
属性：值；
}CSS表示颜色的方式：

用颜色名表示
用十六进制颜色值表示
用RGB函数表示
用HSL函数表示（Hue,Saturation,Lightness，色调、饱和度、亮度）
用RGBA函数表示（A表示的是改颜色的透明度，取值范围是0~1，0代表完全透明）
用HSLA函数表示

内联样式表（内联>内部>外部）：<p style="color:red;"></p>
权值不同时，浏览器是根据权值来判断使用哪种CSS样式的，哪种样式权值高就使用哪种样式层叠优先级：
内联样式>内部样式表ID派生选择器>内部样式表ID选择器>内部样式表类派生选择器>内部样式表类选择器>内部样式表>外部样式表ID派生选择器>外部样式表ID选择器>外部样式表类派生选择器>外部样式表类选择器>外部样式表>浏览器缺省
如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：一个元素同时应用多个Class，后定义的优先（即近者优先），加上!important者最优先CSS选择器：

Class类选择器可以重复利用（选择Class命名的元素以.开头 .first{color:#00f;}）
ID选择器唯一（选择ID命名的元素以#开头#p1{color:#0f0;}）
标签选择器：页面中所有的标签都是一个选择器p{color:red;}

群组选择器：

选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}

包含选择器：

选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开
p span{color:red;}

属性选择器：

选择包含某一属性的元素
a[title]{color:red;} 选择包含title的a标签
a[title][href]{color:red;} 选择包含title和href的a标签

<a>伪类选择器

a:link {color:#FF0000;}（未访问的链接，只用于a标签）
a:visited {color:#00FF00;}（已访问的链接，只用于a标签）
a:hover {color:#FF00FF;}（鼠标移动到链接上，可和其他标签结合一起用）
a:active {color:#0000FF;}（选定的链接）

输入伪类选择器（针对表单）

input:focus{color:red;}（键盘输入焦点）

其他伪类选择器

p:first-child{color:red;} （第一个p）
:before （在元素之前添加内容）
:after （在元素之后添加内容）

css文字文本属性：
font-style:normal/ italic （设置文本为斜体）
font-weight:normal(100-500)/ bold(600-900) （设置文本为粗体）
font-family: “文本字体1”,”文本字体2”; （文本类型）
text-align:left/center/right （文本水平对齐方式）
vertical-align:top/middle/bottom（垂直对齐方式）
line-height:数字px;（设置文本在一行内的高度）
color：（定义文本颜色）
letter—spacing：（定义字符间隔）设置文本简写方式：
text-decoration 文本修饰
none:没有修饰
underline:添加下划线
overline:添加上划线
line-through:添加删除线
text-indent 首行缩进文本大小写：
text-transform:
uppercase 单词都大写
lowercase 单字都小写
capitalize 每个单词首字母大写 单位描述

% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em=当前的字体尺寸，2em=当前字体尺寸的两倍（在CSS中，em可以自动适应用户所使用的字体）
ex 一个ex是一个字体的x-height（x-height通常是字体尺寸的一半）
pt 1pt=1/72英寸（是一个标准的长度单位）
pc 1pc=12点（12点活字）
px 像素

weixin_39628864

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css不继承父类样式_css知识点

CSS只层叠样式表CSS样式是表现，改变网页的呈现效果。CSS内部样式（使用<style></style>标签在文档<head></head>里面定义内部样式表）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title...
复制链接

扫一扫