CSS笔记

最新推荐文章于 2022-10-21 13:43:26 发布

commeil

最新推荐文章于 2022-10-21 13:43:26 发布

阅读量526

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/commeil/article/details/122820965

版权

CSS

美化HTML，使页面更简单，好看

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>语法规范</title>
        <style>
            /* 给谁改样式{改什么样式} */
            p {
     
                color: red;
                font-size: 12px;
            }
        </style>
    
</head>
<body>
    <p>有点意思</p>
</body>

规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pr2kjF1p-1644291648034)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220119232201535.png)]

选择器

基础选择器

标签选择器

标签名作为选择器

缺点：有多个相同标签时无法选中其中一个

类选择器

单独选中一个或某几个选择器

选择器自定义 . + 类名

被选择的标签后加 class=“类名”

<head>  
<title>语法规范</title>
        <style>
         .green {
     color: green;
        }
        </style>
    
</head>
<body>
<ul>    
    <li class="green">11</li>
    <li>22</li>
</ul>
</body>

多类名

一个标签对应多个类名

<标签 class=“类名1 类名2”>内容</标签>

类名用空格隔开

华仔

id选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qdBLpJk-1644291648035)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120091507859.png)]

与类选择器去区别 id只能使用一次

通配符选择器

自动选中所有标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5NGMFRr-1644291648036)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120092015788.png)]

字体属性font

字体系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Mt9967p-1644291648037)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120094332755.png)]

默认显示第一个字体若浏览器不支持则显示下一个字体

（用单引号）

字体粗细

font-weight：数字（默认值一般400）100-900

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjpJ4O9N-1644291648038)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120101602954.png)]

文字样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0YLTNXy-1644291648038)(C:\Users\commeil\AppData\Roaming\Typora\typora-user-images\image-20220120101801652.png)]

复合属性

eg font：italic 700 16px/20px ‘Microsoft yahei’

最低0.47元/天解锁文章

commeil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS美化HTML，使页面更简单，好看css规则两部分构成：选择器 {声名}属性和属性值以“键值对”形式出现属性：属性值键值对间加分号<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
复制链接

扫一扫