码迷,mamicode.com
首页 > 其他好文 > 详细

选择和文本样式

时间:2020-09-17 16:37:42      阅读:23      评论:0      收藏:0      [点我收藏+]

标签:site   cal   child   父类   尺寸   lan   htm   cin   ash   

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 像素

选择和文本样式

标签:site   cal   child   父类   尺寸   lan   htm   cin   ash   

原文地址:https://www.cnblogs.com/yhx-3602/p/13622684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!