CSS的使用

最新推荐文章于 2024-07-25 14:15:14 发布

我是养乐多

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量176

点赞数

分类专栏：前端学习知识点文章标签： css

本文链接：https://blog.csdn.net/Hsiao99/article/details/105595248

版权

前端学习知识点专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.首先W3school的css教程

2.CSS和HTML结合的方式
第一种：在每一个标签后加入style属性，但是会造成可读性差，代码复用性差。
第二种：在head标签中，使用style标签，按照css语法规则定义各种css样式，缺点不能在多个页面复用。

第三种：
CSS和HTML最常用结合的方式：
先在外部定义好css文件：css01.css，在html的head标签里引入：

<link rel="stylesheet" type="text/css" href="css01.css">

3.CSS选择器

标签名选择器：
标签名作为属性：例如修饰所有的div标签

 标签名{
     属性：值；      
     }

id选择器：（通过标签的id属性，指定具体的标签样式，id必须是字母开头）

  #id值{
     属性：值；      
}

类型选择器：（通过标签的class属性选择样式,class也需要字母开头）

.class属性值{
     属性：值；      
}

组合选择器：(可以让多个选择器共用一个代码)

选择器1，选择器2，选择器n{
     属性：值；      
}

测试：
css01.css

#id01{
    color: cornflowerblue;
    font-size: 20px;
}

.c01{
    color: chartreuse;
    font-size: 20px;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css01.css">
</head>
<body>
<div id="id01">div标签1</div>
<div class="c01">div标签2</div>
<div class="c01">div标签3</div>
</body>
</html>

结果：

我是养乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的使用

1.首先W3school的css教程2.CSS和HTML结合的方式第一种：在每一个标签后加入style属性，但是会造成可读性差，代码复用性差。第二种：在head标签中，使用style标签，按照css语法规则定义各种css样式，缺点不能在多个页面复用。第三种：CSS和HTML最常用结合的方式：先在外部定义好css文件：css01.css，在html的head标签里引入：<link...
复制链接

扫一扫

专栏目录