day02-css基础

最新推荐文章于 2024-07-21 19:13:42 发布

The devil

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量422

点赞数 9

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_64085550/article/details/140499758

版权

一、样式书写

样式书写一般分为三类，行内样式，内部样式与外部样式

1、行内样式：不添加选择器且需要添加样式的标签需要添加一个style属性，

例：<div style="属性值"></div>

2、内部样式：通常在head标签里写，但是需要添加style标签。

例：

<head>
        style{
            选择器{
                属性值
            }
        }
    </head>

3、外部样式：建立一个css文件，通过代码引入css文件，通常放在<head></head>标签中 rel="stylesheet"表示属性

例：<link rel="stylesheet" href="文件地址">；rel="stylesheet"表示属性，" href="文件地址表示css文件地址

二、选择器

1、标签选择器：标签名（tagName）会选取所有同名标签，一般用于所有该标签内格式统一

例：p{

属性值；

}

2、类选择器：不限定是哪个标签，只要需要显示同一类型的效果

例：.red{

class:red;

}

圆角：border-radius：像素值;

文本居中：text-align:center;

行高:line-height:像素值；

鼠标变小手：cursor:pointer；

转换块级元素：display：block；

注意:块级元素能设置宽高，行内元素无法设置宽高

3、通配选择器：选中所有标签，通配符：“*”

margin：0；清除留白

padding：0；

}

margin：0 ；padding：0；这两个通常用在通配选择器内，清除所有留白的默认留白

4、id选择器：id是唯一的，适用于特定元素的样式呈现

例：#id{

属性值；

}

5、子代选择器：父子关系：父>子,部分元素可以被子类继承

6、伪类选择器：hover 鼠标移入后会呈现指定的格式

7、选择器优先级: 行内(1000)>id(100)>类(10)>标签(1)>通配(0)>继承（子代）

关注