300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > CSS样式 字体样式 基本选择器的基础笔记

CSS样式 字体样式 基本选择器的基础笔记

时间:2023-06-04 11:58:05

相关推荐

CSS样式 字体样式 基本选择器的基础笔记

CSS:层叠样式表

专门用来控制界面外观风格的文档

CSS注释:/* */

HTML注释:<!-- -->

使用方式

行内样式

1.行内样式—写在标签里

格式:

<div style="color:red; fond-size:20px;">行内样式</div>

行内样式需要写到标签的style属性值中。

内部样式

2.内部样式—只在本页面内生效

格式:

<head><style>div{}</style></head>

内部样式需要写到

外联样式

3.外联样式—单独的css文件

格式:

<link rel="stylesheet" href="css/css文件名">

字体样式属性

font-size

1.font-size:字体大小

浏览器默认大小为:16px

浏览识别的最小字体:12px

注:

px固定大小的单元,用于屏幕媒体

em相对字体长度单位,跟随父元素的字体大小变化,不固定

rem相对于根元素的字体大小的单位

font-family

2.font-famile:字体

浏览器默认字体为微软雅黑

可以同时指定多个字体,中间以逗号隔开

英文字体放前面

结:

尽量使用偶数的数字字号

各种字体之间必须使用英文状态下的逗号隔开

字体名中包括空格、#、¥等符号,用双引号包着

尽量使用默认字体

font-weight

3.font-weight:字体粗细

属性值:

normal(正常)

bold(加粗)

bolder(更粗)

lighter(更细)

整百数(100-300细、400-600正常、700-900粗)

font-style

4.font-style:字体风格

属性值:

italic(斜体)

normal(正常)

oblique(倾斜)

注:

当用italic浏览器不显示时,就用oblique强制

字体的简写形式

font:font-style font-weight font-size font-family

font-size和font-family必须保留,否则font属性将不起作用

基本选择器

标签选择器

1.标签选择器:选中所有div标签

div{

}

使用:直接生效

类名选择器

2.类名选择器:选中需要的,可选多个

.box{

}

使用:class=”box“

id选择器

3.id选择器:同样名字的id只能有一个

#one{

}

使用:id=“one”

通配符选择器

4.通配符选择器:对所有的标签全部渲染

*{

}

使用:直接生效

谨慎使用,影响效率

伪类选择器

:link:未访问的链接

:visited:已访问的链接

:hover:鼠标移动到链接上

:active:选定的链接

注:

:link只对拥有实际链接地址的a对象发生效果

:hover可以适用多种标签

CSS外观属性

color

color:文本颜色

属性值:

预定义的颜色名

red

green

blue

十六进制的颜色值:0-9 A-F(a-f)

红:#f00

绿:#0f0

蓝:#00f

白:#fff

黑:#000

RGB颜色值:0-255

红:rgb(255,0,0);

颜色半透明rgba:0-1(完全透明-不透明)

rgba(255,0,0,0.5);

line-height

2.行间距/行高:line-height

文字的基线与基线之间的距离

以字母小x为例:

它的下沿端是基线

它的中心线就是中线

一行文字的顶就是顶线

一行文字的底就是底线

注:

一般行高设置就是比字号大7-8个像素就可以了

text-align

3.水平对齐方式

text-align:

属性:

left:默认左对齐

right:右对齐

center:居中

justify:两端对齐

单行文本水平垂直居中

text-align:center;

line-height:**px;

把行高和盒子的高度保持一致

首行缩进

text-indent:2em;

文本修饰

text-decoration

属性值:

underline:下划线

overline:上划线

line-through:删除线

none:去掉文本修饰

大小写转换

text-transform

属性值:

capitalize:首字母大写

uppercase:大写字母

lowercase:小写字母

none:无转换

字符间距

letter-spacing

汉字和字母之间的间距

支持负值

单词间距

word-spacing

单词之间的距离

文字阴影

text-shadow

属性值:

v-shadow:水平距离(正右)

h-shadow:垂直距离(正下)

blur:模糊距离

color:阴影颜色

text-shadow:水平距离 垂直距离 模糊距离 阴影的颜色;

注:

多重颜色:

text-shadow:-5px 0 0 cyan,5px 0 0 rgb();

用逗号隔开,cyan(蓝绿色/草绿色)

模糊距离:

没有可以不写

前两个必须写,后两个可选

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。