css基础学习
CSS 简介
作用:CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS 语法规范:
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。
选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分
选择器分类
标签选择器:可以选出所有相同标签,但是不能差异化选择。定义 标签名{属性},无引用。
类选择器:可以根据需求多次选择(一人多名)。定义 .标签名{属性},引用 class=“标签名”。
id 选择器:只能在每个HTML文档中只能出现一次。定义 #标签名{属性},引用 class=“标签名”。
通配符选择器。all都改变。定义 *{属性},无引用。
3.CSS字体属性
字体系列:font-family 属性
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体:body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
字体大小:font-size属性,必须带px单位
CSS 使用 font-weight 属性设置文本字体的粗细。
属性值 normol(不加粗=400);bold(定义粗体>400)
文字样式(如斜体)。
p {
font-style: normal;
}CSS 使用 font-style 属性设置文本的风格。
normol默认值
italic 斜体
字体的复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}
使用 font 属性时,必须按上面语法格式中的顺序书写,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。
4. CSS 文本属性
文本的颜色。
div {
color: red;
}十六进制,rgb代码
对齐文本
div {
text-align: center;
}text-align 属性用于设置元素内文本内容的水平对齐方式。
left,center,right,justify(两边对齐)
装饰文本
div {
text-decoration:underline;
}text-decoration:underline(下划线)/line-through(删除线)
文本缩进
div {
text-indent: 10px;div {
text-indent: 10em;text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
em 是一个相对单位,就是当前元素(font-size) 1 个文字的大小
行间距等
p {
line-height: 26px;
}line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
5.CSS 的三种样式表
CSS 的三种样式(行内式,嵌入式,链接式)
内部样式表
<style>
div {
color: red;
font-size: 12px;
}
</style>
内嵌样式表是写到html页面内部. 是将所有的 CSS 代码抽取出来,单独放到一个 <style> 标签中。控制一个页面
行内样式表
<div style="color: red; font-size: 12px;"></div>
style 其实就是标签的属性,控制一个标签。
外部样式表
<link rel="stylesheet" href="css文件路径">
新建一个后缀名为.css的文件,把所有文件放入其中
在 HTML 页面中,使用<link> 标签引入这个文件。