属性、基础选择器、CSS外观属性"/>
CSS初识:CSS字体样式属性、基础选择器、CSS外观属性
CSS初识
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或**层叠?**样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
CSS样式规则
使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:
h1 { color: red; font-size: 25px}
选择器(标签选择器) 属性:属性值 用分号连接
属性="属性值" 用空格链接
需要注意的是1.排版结构 用段落对齐的排版书写css
CSS字体样式属性
font-size:字号大小
font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。
相对长度单位 | 说明 |
---|---|
em | 相对与页面的尺寸 |
px | 像素,最常用,推荐你使用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:
p{ font-family:“微软雅黑”;}
1.一般网页都是14px以上的字体
2.偶数字体字号,ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是,且有空格$#的时候,用双引号括起来
5.尽量使用系统默认字体,保证任何用户的浏览器都能正确显示
CSS Unicode字体
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
Unicode,同一码,万国码,单一码,业界标准,它为每种语言的每个字符都设置一个唯一的二进制编码,以满足我们跨语言,跨平台进行文本转换,处理的要求
1.用英文表示
2.用unicode
3.一般用中文
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-weight的属性值 normal,bold,lighter,100-900(100的整数倍)
700和boldr一样,400相当与normal
font-style:字体风格
字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。
font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
重要重要重要
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
选择器(重点)
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。
基础选择器
标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名 {属性名1:属性值1;属性名2:属性值2;}
最大优点是快速为页面用类型的标签同一样式,也是他的缺点,不能设计差异化样式
类选择器
类选择器用"."(英文点号)进行表示,后面紧跟类名
.类名{属性名1:属性值1;属性名2:属性值2;}
类选择器最大优点就是可以为元素定义单独或相同的样式
1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器1.少按一个shift键2.区分js变量变量3.浏览器兼容问题,在IE6中 _tip无法生效的
3.不要用纯数字,中文命名,尽量用英文字母表示
多类名选择器
可以为标签增加多个类名,从而达到更多选择目的
1.样式显示效果和html元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关
2.各个类名用空格连接
多类名选择器在后面项目常用到
id选择器
id选择器用"#"(英文点号)进行表示,后面紧跟id名
#id名{属性名1:属性值1;属性名2:属性值2;}
id是唯一的,只能对用文档中某一个具体的元素,id是html的id属性值,用法和类选择器类似
id选择器和类选择器区别
id相当身份证号(不得重复,只是用一次),类选择器相当名字(多次重复使用)
最大的不同就是使用次数
通配符选择器
*{属性名1:属性值1;属性名2:属性值2}
所有选择器作用最广的,匹配所有元素
伪类选择器
伪类选择器添加一些特殊效果,比如选择第一元素,第n个元素
类选择器用 . 伪类用 :
链接伪类选择器
: link 未访问的连接
:visited 、以访问的连接
:hover 鼠标悬停
:active 选定的连接
注意写的时候,顺序不要颠倒,lvha, love hate
结构(位置)伪类选择器(CSS3)
E:first-child | 选择父元素的第一个子元素 |
---|---|
E:last-child | 选择父元素的最后一个子元素 |
E:nth-child(n) | 选择父元素下的第n个元素或奇偶元素,n的值为“数字 | odd | even” |
E:only-child | 选择父元素中唯一的子元素(该父元素只有一个子元素) |
目标伪类选择器(CSS3)
CSS注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 “/*” 标记开始注释,在内容的结尾使用 “*/”结束。
例如:
p {font-size: 14px; /* 所有的字体是14像素大小*/
}
CSS外观属性
color:文本颜色
color属性用于定义文本的颜色,其取值方式有3种:
- 预定义的颜色值,如red,green,blue等。
- 十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
- RGB代码,如红色可以表示为reb(255,0,0)或(100%,0%,0%)。
注意:如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%
line-height:行间距
ine-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
一般情况下,行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:
left:左对齐(默认值)
right:右对齐
center:居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
letter-spacing:字间距
letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。
word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。
颜色半透明(css3)
文字颜色到了CSS3我们可以采取半透明的格式
CSS3 中rgba的用法
CSS3 中的颜色有三种定义方法:使用颜色方法(RGB、RGBA、HSL、HSLA),十六进制颜色值和预定义的颜色名称。
RGBA是代表red-红色、green-绿色、blue-蓝色 和alpha-透明度四个单词的缩写。RGBA颜色值是RGB颜色值的扩展,带有一个alpha通道-它规定了对象的不透明度。
2 取值范围:
R:红色,正整数(0-255)
G:绿色,正整数(0-255)
B:蓝色,正整数(0-255)
A:透明度,取值(0-1)
文字阴影(CSS3)
以后我们可以给我们的文字添加阴影效果了 Shadow 影子
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式
text-shadow:5px 2px 6px #000;
文字显示阴影效果共4个值,第一个代表距离左多少距离开始显示阴影效果,第二个值代表距离上多少距离开始显示阴影效果,第三个值代表阴影范围大小,第四个值为阴影效果颜色。
更多推荐
CSS初识:CSS字体样式属性、基础选择器、CSS外观属性
发布评论