html基础入门（三）

最新推荐文章于 2021-06-07 16:05:18 发布

Pkuyzh

最新推荐文章于 2021-06-07 16:05:18 发布

阅读量273

点赞数 2

版权

2019.09.11

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

语法

selector {declaration1; declaration2; ... declarationN }

h1 {color:red; font-size:14px;}

提示

例：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

字体属性

p{ font-family:"微软雅黑";}

1.一般网页都是14px以上的字体
2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是，且有空格$#的时候，用双引号括起来
5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

font-style：设置字体风格

如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

p {font-variant:small-caps;}

font-weight ：设置字体的粗细,字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现

font-weight的属性值有：normal,bold,lighter,100-900（100的整数倍）
700和boldr一样，400相当与normal

标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名  {属性名1:属性值1；属性名2:属性值2；}

类选择器
类选择器用"."(英文点号)进行表示，后面紧跟类名

.类名{属性名1:属性值1；属性名2:属性值2；}

1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	少按一个shift键
	区分js变量变量
	浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示

多类名选择器
可以为标签增加多个类名，从而达到更多选择目的

1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
2.各个类名用空格连接

id选择器
id选择器用"#"(英文点号)进行表示，后面紧跟id名

#id名{属性名1:属性值1；属性名2:属性值2；}

id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似

通配符选择器

*{属性名1:属性值1；属性名2:属性值2}

伪类选择器

伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素

类选择器用 . 伪类用 :

链接伪类选择器