CSS选择和文本样式

CSS指层叠样式表
CSS样式是表现,改变网页的呈现效果。

CSS内部样式:

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

posted @ 2020-09-06 22:06  一位绅士  阅读(315)  评论(0)    收藏  举报