Css样式之简介

Css简介

使用场景：美化网页、布局页面。
css是层叠样式表的简称。Css也是一种标记语言。
css主要用于设置HTML页面中的文本内容（字体、大小、、对齐方式等）、图形的外形（宽高、边框样式、边距等）以及版面的布局和外观显示的样式。
css让我们的网页更加丰富多彩，布局更加的灵活

Css语法规范

Css规则主要有两个部分构成：选择器以及一条或者多条声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验css语法规范</title>
    <style>
        /* <!--
         选择器： {
             样式
         }
         -->*/
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
  • 其中，选择器适用于指定css样式的HTML标签，花括号是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式展现。

Css选择器的作用

根据不同的需求将标签选出来就是选择器的作用。

基础选择器和复合选择器。

标签选择器：

可以把某一类的标签全部选择出来，比如所有的

和所有的标签。

能快速为页面中同一种类型的标签设置统一的样式。

不能设计差异化样式，只能选择全部的当前标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p {
    color: red;
    }
    div{
        color: green;
    }
</style>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<p>男生</p>

<div>女生</div>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>

类选择器

可以单独的选择一个或者几个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        类选择器：
        样式点定义
        结构类调用
        一个或多个
        开发最常用-- >
        .red {
            color: red;
        }
    </style>
</head>
<body>

<ul>
    <li class="red">1</li>
    <li class="red">1</li>
    <li>1</li>
    <li>1</li>
</ul>

<div class="red">hongse</div>

</body>
</html>

id选择器

HTML元素以id属性来设置id选择器，Css中使用"#"来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        id选择器的口诀：
        样式#定义，结构id调用，
        只能调用一次，别人切勿使用-- >
        #pink {
            background-color: pink;
        }
    </style>

</head>
<body>

<div id="pink">888888</div>

</body>
</html>

通配符选择器

*{
属性1：属性值;
}

Css字体属性

CSS Fonts属性用于定义字体系列、大小、粗细和文件样式。

px(像素):大小是我们网页最常用的单位。
font-size：10px
font-weight：700;字体加粗（blod）

书写顺序：
body{
 font：font-style font-weight font-size、line-height font-family
}
不能更换顺序，可以省略不写，各个属性使用空格隔开。
posted @ 2021-09-04 22:52  King-DA  阅读(192)  评论(0)    收藏  举报