零基础学CSS（一）

最新推荐文章于 2024-03-31 16:45:22 发布

临渊羡鱼96

最新推荐文章于 2024-03-31 16:45:22 发布

阅读量252

点赞数 1

本文链接：https://blog.csdn.net/qq_34574423/article/details/118392641

版权

一.css语法

css由两部分组成：选择符和一条或者多条声明组成

选择符又叫选择器，给药定义样式的标签起的名字，标签名也可以作为选择器

声明要放在{}中

声明不分先后顺序

每一条声明要以分号结尾，最后一条声明的分号可以省略

每一条声明回车空格是不会影响代码的展示的

二.css的引入方式

1.行内式引入：通过style属性，将样式写在标签上

语法：<标签 style="css样式"></标签>

不建议使用，因为没有做到结构和表现得相分离
<span style="font-size: 50px; color: blue;">我是span</span>

2.内嵌式引入：通过style标签，将css的样式写在style标签里

style标签要放在描述区head中，title的下面

语法：<style>

选择符{css样式}

</style>

应用场景：应用于单个页面（活动页、主体页....）

<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>
        h1{
            color: pink;
            font-size: 50px;
        }
    </style>
</head>

3.外链式引入：通过link标签引入外部的css文件

语法： <link rel="stylesheet" href="css的文件路径">

rel="stylesheet"：让当前页面和外链的css文件产生关联

应用场景：应用于多个网页（网站）
<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>
    <link rel="stylesheet" href="./firstJs.css">
</head>



body{
    background: #ccc;
    font-size: 20px;
}

三.基本选择器

1.类型选择器：标签名作为选择器

应用场景：清除默认样式，例如：
i,em{
    font-style: normal;
}
b,strong{
    font-weight: normal;
}
2.id选择器：html中设置语法：<标签 id="id名"></标签>

css中的语法：#id名{css样式}

备注：在一个页面中id名是唯一的

应用场景：一般作为给外围结构起名字或者js通过id获取元素
<div id="box"></div>
#box{
    color: pink;
}
3.类选择器：又叫class选择器，class名可以使一个此列表，中间用空格隔开

html中设置语法：<标签 class="class名"></标签>

css中的语法：.class名{css样式}

可以给所有class名为一样的设置样式
<p  class="con"></p>
    <span class="con"></span>
    <div class="con"></div>
.con{
    background: blue;
}
4，通配符选择器：选中页面中的所有的标签

语法：*{css样式}

应用场景：清除所有标签的内外边距
*{
    margin: 0;
    padding: 0;
}
5.标识符的规范

始终使用字母、数字或者连字符，并且始终以字母开头，除了_和-连字符外不要使用其它特殊字符，区分大小写，不建议使用中文。

四.字体属性

1.font-size：设置字体大小，默认字号是16px

注意：字号只有偶数没有奇数，最小的字号不能低于12px

2.font-family：设置字体

注意：默认hi微软雅黑，多个字体之间用逗号隔开，多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，

如果有英文字体，要不英文字体放在前面

只有一个单词的字体不需要加引号，其它的都需要加引号

3.font-weight：设置字体加粗

bold加粗或者（700）

100~900为字体指定了9级加粗度

normal正常（默认）

4.font-style：设置字体的倾斜

italic：倾斜

normal：文本显示正常（默认）

5.line-height：行高（字体的高+字体的上下间距）

normal（默认值）

length（px结尾）

number：行高=font-size*number

备注：行高要大于字号

6.复合写法：font简写属性放在一个属性中设置所有的字体属性

font：font-size font-weight font-size/line-height font-family

简写时，font-size和line-height只能通过斜杠来组成一个值，不能分开写，顺序不能变，这种简写方式只有在指定了font-size和font-family属性时才能起作用
p{
    font-size: 20px;
    font-weight: bold;
    font-style: initial;
    font-family: "微软雅黑";
    line-height: 30px;
}
/* 可以简写为 */
p{
    font:initial bold 20px/30px "微软雅黑"
}

临渊羡鱼96

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
零基础学CSS（一）

一.css语法css由两部分组成：选择符和一条或者多条声明组成选择符又叫选择器，给药定义样式的标签起的名字，标签名也可以作为选择器声明要放在{}中声明不分先后顺序每一条声明要以分号结尾，最后一条声明的分号可以省略每一条声明回车空格是不会影响代码的展示的二.css的引入方式1.行内式引入：通过style属性，将样式写在标签上语法：<标签 style="css样式"></标签>不建议使用，因为没有做到结构和表现得相分离<span s.
复制链接

扫一扫