CSS基础学习

最新推荐文章于 2024-07-12 20:49:16 发布

Jenny_Ghost

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量163

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/Jenny_Ghost/article/details/120452819

版权

一、CSS的作用

为页面中的HTML标签设置样式

二、CSS的语法规则

CSS写在<style>标签中，<style>标签写在<head>标签中,<head>在<title >中。

<head>
    <title>
    <style>
        选择器{
                CSS的属性
              }
    </style>
    </title>
</head>

三、CSS引入方式

1.内嵌式

写在style标签中。一般作用在当前的网页中

<head>
    <title>
    <style>
        选择器{
                CSS的属性
              }
    </style>
    </title>
</head>

2.外联式

写在单独的.css文件中，通过link标签引入。一般作用于多个页面

.css文件：

p{
    color: red;
}

而在网页中引用css文件需要使用link标签

<head>
    <title>
    <link rel="stylesheet" href="./.css">//href是路径
    </title>
</head>

3.内行式

写在标签的style属性中，作用于当前标签。需要配合js使用。

<body>
    <p style="color=green;">p标签</p>
</body>

四、基础选择器

1.标签选择器

结构：标签名{CSS属性名：属性值；}

在style标签中直接输入标签名进行选择，选中一类标签，标签不管被嵌套多少层都会被选中

2.类选择器

结构： .类名{CSS属性名：属性值；}

每个标签上都有一个class属性 ,通过对class属性单独选择就可以单独设置标签的属性。

一个标签可以拥有多个类名（class），中间需要用空格隔开。

类名可以重复。

<head>
    ‹style>
    .red {
        color:  red;
    }
    .yellow{
        color: yellow
    }
    </style>
</head>
<body>
    <p class="red">红</p >
    <p class="yellow">黄</p >
</body>
</html\>

3.id选择器

结构： #id{CSS属性名：属性值；}

<head>
    ‹style>
    #red {
        color:  red;
    }
    #yellow{
        color: yellow
    }
    </style>
</head>
<body>
    <p id="red">红</p >
    <p id="yellow">黄</p >
</body>
</html\>

与类名不同，id是不可以重复的，一个标签也只能有一个id，一个id选择器也只能选择一个标签

4.通配符选择器

结构： * {CSS属性名：属性值；}

使用通配符选择器会选择页面中的所有标签来设置样式

五、字体和文本相关样式

1.字体样式1

①字体大小

属性名：font-size

取值：数字 + px（像素

<head>
    <title>
    <style>
        p{
                font-size：58px；
              }
    </style>
    </title>
</head>

②字体粗细

属性名：font-weight

取值：可以使用文字normal（正常）、bold（加粗）或者使用数字100~900的整百数（400是正常）

<head>
    <title>
    <style>
        p{
               font-weight：bold；
              }
    </style>
    </title>
</head>

③字体样式

属性名：font-style

取值：normal、italic（倾斜）

④字体系列

属性名：font-family

取值：具体字体、字体系列

可以有多个取值，取值之间使用“，”间隔。如果第一种字体在电脑中没安装，会从左往右按顺序使用下一种字体

<head>
    <title>
    <style>
        p{
               font-family：宋体；
              }
    </style>
    </title>
</head>

⑤样式的层叠问题

当给同一个标签设置了多个属性，此时样式会层叠，写在下面的会生效。

⑥字体font相关属性的连写

属性名：font

属性值：各个属性的取值写在一起，中间用空格隔开（有顺序要求

取值顺序：style weight size family

注意：如果要进行属性的省略，只能省略前两个属性，后两个不能省略。

如果同时出现连写和单独的样式，需要把单独的样式写在连写下面，否则无法应用单独的样式

<head>
    <title>
    <style>
        p{
               font：italic 700 58px 宋体，黑体；
          }
    </style>
    </title>
</head>

2.文本样式

① 文本缩进

属性名：text-indent

取值：数字+px 或者数字+em（1em=当前标签一个字的大小）

使用em会更加方便。

<head>
    <title>
    <style>
        p{
              text-indent：2em or 32px
          }
    </style>
    </title>
</head>

②文本对齐方式

属性名：text-align

取值：left center right（左中右对齐）


<head>
<title>Document</title›
‹style>
    .box {
        width: 400px;
        height: 400px;
        background-color:blue;

        text-align: center;
    }
</style>
</head>

用div标签来使文本限制在一定范围内

③文本修饰

属性名：text-decoration

取值：underline（下划线）、line-through（删除线）、overline（上划线），none(无装饰线)

六、选择器の进阶

1.后代选择器

在标签的嵌套中，可以直接选择到子标签，并进行属性的更改

结构：.父标签子（后代）标签{css属性} （选择器之间使用空格隔开）

2.子代选择器

作用：根据 HTML 标签的嵌套关系，选择父元素子代中满足条件的元素

语法：选择器1>选择器2{css}

只选择出子代，选择器之间使用 > 隔开

3.并集选择器

作用：同时选择多组标签，设置相同的样式

语法：选择器1，选择器2{css}

4.交集选择器

作用：选中页面中同时满足多个选择器的标签，找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

语法：选择器1选择器2{css}

5.Emmet语法

作用：通过简写语法，快速生成代码

6.hover伪类选择器

作用：当鼠标悬停在元素上时元素发生变化后的状态
语法：选择器hover { css }

<head>
    <meta charset="UTF-8">
    <meta name= "viewport" content= "width=device-width,initial-scale=1.0">
    <title›Document</title›
    <style>
    a{
        text-decoration: none;
    }
    a: hover {
        color: orange;
        text-decoration: underline;
    }
</style>
</head>
<body>
    <a href="#">杜兰特更衣室枪杀库里</ a>
</body>
</html>

Jenny_Ghost

关注

0
点赞
踩
1

收藏

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

一、CSS的作用为页面中的HTML标签设置样式二、CSS的语法规则 CSS写在<style>标签中，<style>标签写在<head>标签中。<title> <head> <style> 选择器{ CSS的属性 } </style> ...
复制链接

扫一扫