css基础学习

CSS 简介

  1. 作用:CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式

  2. 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> 标签引入这个文件。


css基础学习
http://localhost:8090//archives/cssji-chu-xue-xi
作者
文伊仪
发布于
2024年09月24日
许可协议