css学习笔记（基本认知和基础选择器）

最新推荐文章于 2024-06-01 16:06:49 发布

l_al_al_a

最新推荐文章于 2024-06-01 16:06:49 发布

阅读量369

点赞数 5

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/l_al_al_a/article/details/136590581

版权

css引入方式：

1> 内嵌式：css写在style标签中（小案例）

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中

代码示例：在一个html文件中

<head>

<title>Document</title>

<style>

color: brown;

}

</style>

</head>

<body>

<p>这是一段文字哦</p>

</body>

</html>

2>外联式：css写在一个单独的。css文件中（项目中）

提示：需要通过link标签在网页中引入

代码示例：

在html文件中的部分：

<head>

<title>Document</title>

</head>

<body>

<p>这是一段文字</p>

</body>

</html>

在css文件中的部分：

color: blanchedalmond;

}

3>行内式：css写在标签的style属性中（配合js使用）

提示：基础班不推荐使用，之后会配合js使用

代码示例：

<head>

<title>Document</title>

</head>

<body>

<div style="color: blue; font-size: 30px;">这是一句话</div>

</body>

</html>

基础选择器

#目标#：理解选择器的作用，能够使用基础选择器在HTML中选择元素

学习路径：
1.标签选择器

结构：标签名{css属性名：属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

*1.标签选择器选择的是一类标签，而不是单独某一个

*2.标签选择器无论嵌套关系有多深，都能找到对应的标签

2.类选择器

结构：.类名{css属性名：属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

*1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

*2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

*3.一个标签可以同时有多个类名，类名之间以空格隔开

*4.类名可以重复，一个类选择器可以同时选中多个标签

代码示例：

<head>

<title>Document</title>

<style>

color:blue;

}

.红色{

color: red;

}

</style>

</head>

<body>

</body>

3.id选择器

结构：#id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

*1：所有标签上都有id属性

*2：id属性值类似于身份证号码，在一个页面中是唯一的，不可重复！

*3.一个标签上只能有一个id属性值

*4.一个id选择器只能选中一个标签

代码示例：

<head>

<title>Document</title>

<style>

#blue{

color: skyblue;

}

</style>

</head>

<body>

</body>

4.通配符选择器

结构：*{css属性名：属性值}

作用：找到页面中所有的标签，设置样式

注意点：

*1.开发中使用极少，只会在极其特殊情况下才会用到

*2.在基础班小页面中可能会用于去除标签默认的marging和padding

代码示例：

<head>

<title>Document</title>

<style>

color: red;

}

</style>

</head>

<body>

</body>

l_al_al_a

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记（基本认知和基础选择器）

提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中。*1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。*2：id属性值类似于身份证号码，在一个页面中是唯一的，不可重复！3>行内式：css写在标签的style属性中（配合js使用）作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。<h1 id="blue">一级标题</h1>作用：通过标签名，找到页面中所有这类标签，设置样式。
复制链接

扫一扫