CSS

1.html局限性--结构

vscode中！回车调出结构（工具：vscode）

2.css--布局

选择器+声明：p {color:red;font-size:25px;}需要英文符号

写在`<head>`标签中

选择器：选择特定标签

标签选择器

<html>
<head>
    <title>Document</title>
    <!-- 标签选择器 -->
    <style>
        p 
        {
            color: red;
        }
        div 
        {
            color:yellow;
        }
    </style>
</head>
<body>
    <p>red</p>
    <div>yellow</div>
</body>
</html>

类选择器【命名规则】

<html>
<head>
    <title>Document</title>
    <!-- 类选择器 -->
    <style>
        .red
        {color:red;}
        .green
        {color:green;}
        .font20
        {font_size:20px;}/*代码复用，多类名*/
    </style>
</head>
<body>
    <ul>/*无序列表*/
        <li class="green font20">1</li>
        <li class="red font20">2</li>
        <li class="green">3</li>
    </ul>
</body>
</html>

id选择器

<html>
<head>
    <title>Document</title>
    <!-- id选择器 -->
    <style>
        #dark/*id唯一，只能调用一次*/
        {color:darkblue}
    </style>
</head>
<body>
    <div id="dark">darkblue</div>
</body>
</html>

通配符选择器(不需要单独调用，自动赋值，权重值：id>class>标签>*）

<style>*{color:red;}</style>

文字

字体样式：font-family:"宋体"，Arial；优先显示第一个字体！

字体大小： font-size:20px;

字体粗细： font-weight: normal;//=400取值：bold=700,bolder,lighter

文本风格： font-style: italic;取值：noraml

复合属性：font: font-style font-weight font-size font-family//font: italic 700 16px "宋体"；

文字对齐：text-align:center;

装饰文本：text-decoration:underline line-through overline none;

文本缩进：text-indent: 2em;

行间距：line-height:26px;

引入方式

内部样式表

<style></style>写在head标签中

行内样式表

<div style="font-size:200px;color:red;">css</div>

外部样式表

<link rel="stylesheet" href="style.css"> css文件中只有样式

css基础知识

CSS