CSS学习第一天

最新推荐文章于 2024-07-13 11:46:18 发布

卡门726

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量167

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_45060976/article/details/106592270

版权

选择器

在CSS中，我们需要选择器来进行选择我们要进行操作的标签，它的作用就是选择标签。

选择器的类别

1.基础选择器

形式
标签名 {
属性：值
}
例如：

div {
color : red;
}

类选择器

这是使用最多的选择器
形式：
.类名 {
属性：值
}
例如：

.eg {
color: red;
引用：
<div class="eg"></div>
}

注意不要忘记类名前面的一个点。这里有一个口诀可以帮助我们记忆“样式点
定义，结构（class）调用，一个或多个，开发最常用。

id选择器

形式：
#id名：{
属性名：值
}

# eg {
color : red;
}
引用：
<div id="eg"></div>

注意，一个id选择器只能调用一次（样式#定义，结构id调用，只能用一次）。

通配符选择器

作用于整个界面
形式：

{
属性：值
}
上面介绍了选择器的基本类型，接下来我们来介绍一下选择器里面的属性和值。

字体（font）属性

font-family	字体系列例如：微软雅黑
font-size	文字大小
font-weight	字体粗细
font-style	文本的风格例如：斜体加粗等等

使用示例：

 div {
           font-size: 12px;
           font-weight: 400;
           font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
           /* 这里一般会设置多种字体，防止一些系统不兼容 */
           font-style: italic;
       }
       
      /* 考虑到每一个属性都会占用一行，会增加代码量，我们这里可以采用符合属性，值得注意的是，书写符合属性是顺序不能颠倒 */
       p {
           font: font-style font-weight font-size/line-height font-family;

文本（text）属性

text	设置文本水平对齐方式：left rigth center
text-decoration	添加下划线上划线删除线等
line-height	设置行间距
text-indent	文本第一行的缩进 2em为两个字节的大小

CSS的三种样式

1.行内式：顾名思义就是书写在标签内的样式
用于比较简单的样式
eg:

<div class="color:red"></div>

2.内部式
书写在head标签中
eg:

<head>
      < style>
      p {
        color: red;
      }
   </style>
</head>

3.外部样式表：
用于样式比较多的情况下，单独建立一个CSS文件，使用时引入
引用：

<link rel="stylesheet" href="CSS文件路径“>

卡门726

关注

1
点赞
踩
0

收藏

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

选择器在CSS中，我们需要选择器来进行选择我们要进行操作的标签，它的作用就是选择标签。选择器的类别1.基础选择器形式标签名 {属性：值}例如：div {color : red;}类选择器这是使用最多的选择器形式：.类名 {属性：值}例如：.eg {color: red;引用：<div class="eg"></div>}注意不要忘记类名前面的一个点。这里有一个口诀可以帮助我们记忆“样式点定义，结构（class）调用，一个或多个，
复制链接

扫一扫