css01

css简介
css基础选择器
css字体属性
css文本属性
css的引入方式
综合案例
调试工具

1.css简介

css主要是为了美化页面布局页面的 html太丑了
css是层叠样式表的简称(Cascading Style Sheets) 也是一种标记语言
结构与样式分离或许不一定是外部样式表（即不写在一起也可以是结构给html 干样式给css干）
css语法规范
p { color: red; font-style: italic; }
1. 由两部分构成: 选择器以及一条或多条声明(找对象搞对象)
2. 声明是键值对属性和属性值
  之间用: 隔开
3. 多个键值对用;分开
代码风格
p { color: red; font-style: italic; }  p {color: red; font-style: italic;}
1. 尽量用展开格式 (看起来更直观不紧凑)
2. 样式选择器属性名属性值用小写（特殊情况除外）
3. 选择器和大括号之间一个
  冒号后面一个

2.css基础选择器

标签选择器

    <textarea name="" id="" cols="30" rows="10">p {

color: pink;
}

</li>
<li>
    <h4>类选择器</h4>
    <ol>
        <li>样式点定义 结构类调用 一个或多个（标签） 开发最常用</li>
        <li>
            <textarea name="" id="" cols="30" rows="10">.footer{

color: grey;
}

变灰色

类名可以看看规范手册
多类名 class属性中写多个类名以空格作为分割

case1

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
            }

            .red {

                /* 背景颜色 */
                background-color: red;
            }

            .green {

                background-color: green;
            }
        </style>
    </head>

    <body>
        <div class="red">&nbsp;</div>
        <div class="green">&nbsp;</div>
        <div class="red">&nbsp;</div>
    </body>

    </html>

    代码实现 : <br><textarea name="" id="" cols="50" rows="40"><!DOCTYPE html>

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>

<style>
    div {
        width: 100px;
        height: 100px;
    }

    .red {

        /* 背景颜色 */
        background-color: red;
    }

    .green {

        background-color: green;
    }
</style>

</head> <body> <div class="red">& nbsp</div> <div class="green">& nbsp;</div> <div class="red">& nbsp;</div> </body>

id选择器

样式#定义结构id调用（一个标签）只能调用一次（id）
#red { color: red; } <div id="red"></div>
id 好比身份证号 class好比人名（可以有多个）
id选择器一般用于页面唯一性的元素上经常和JavaScript搭配使用

通配符选择器

* {} 就行不需要调用 *表示选取页面中所有元素

3. 字体属性

字体系列 font-family h2 { /* 这里'' 和""没区别 */ /* 一般好像汉字或者多个英文单词之间才加"" */ font-family: '微软雅黑'; } <p>p {<br> /* 可以写多个会从左到右找你的浏览器有哪个都没找到可能就用微软雅黑了 <em>/<br> font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;<br> }<br>

字体大小 font-size
body {<br> font-size: 20px<br> }<br> <br> /</em> 标题标签比较特殊，需要单独指定文字大小否则按照整体的大小有个增加的倍数*/<br> h2 {<br> font-size: 16px;<br> }<br>

love me plz

字体粗细 font-weight

        </tr>
        <tr>
            <td>normal</td>
            <td>默认值</td>
        </tr>
        <tr>
            <td>bold</td>
            <td>定义粗体</td>
        </tr>
        <tr>
            <td>100-900</td>
            <td>400==normal 700==bold 数字后面无单位</td>

        </tr>
    </table>
    <div style="font-weight: 700;">love me plz</div>
</li>
<li>
    文字样式 font-style
    <table border="1" cellspacing="0">
        <tr>
            <th>属性值</th>
            <th>作用</th>
        </tr>
        <tr>
            <td>noraml</td>
            <td>默认值</td>
        </tr>
        <tr>
            <td>italic</td>
            <td>斜体</td>
        </tr>
    </table>
    <div style="font-style: italic;">love me plz</div>
</li>
<li>
    字体复合属性 font: 多个属性值 空格做分割
    <textarea name="" id="" cols="30" rows="10">body {
<!-- font: font-style font-weight font-size/line-height font-family; -->
font: italic 400 16px "Microsoft Yahei"
<!-- 前两个可以省略 按默认值-->

}

属性值	描述

4. CSS文本属性

文本颜色 color属性

标签：css1,color,red,font,选择器,css,属性
From： https://www.cnblogs.com/RikkaandLcj/p/16967690.html

css1

css01

1.css简介

css语法规范

代码风格