【前端web入门第三天】01 css定义和引入方式 四种标签选择器
文章目录:
- 1.css 定义
- 2.css引入方式
- 3.选择器
- 3.1 标签选择器
- 3.2 类选择器
- 3.3 id选择器
- 3.4 通配符选择器
- 4. 画盒子
1.css 定义
层叠样式表(Cascading Style Sheets，缩写为CSS)，是一种样式表语言，用来描述HTML文档的呈现（美化内容)书写位置:title标签下方添加style 双标签，style标签里面书写CSS代码。
写在哪里?
head里,title下面
怎么写
先写style标签,里面写css代码,然后就是写选择器和css属性
选择器{属性名:属性值;}
代码模板样例:
<style>
/* 选择器 */
p{
/* css属性,键值对的形式 */
/* color:颜色; */
color: darkorange;
/* font-size: 像素大小; */
font-size: 100px;
}
style>
<body>
<p>CSS首次学习p>
body>
效果如下:
2.css引入方式
- 内部样式表:学习使用
- CSS代码写在style标签里面
- 外部样式表:开发使用
-
CSS代码写在单独的CSS文件中(.css)
-
在HTML使用link标签引入
<link rel="stylesheet" href="./my.css">
-
.css文件里面怎么写
直接写style里面的代码即可
rel写什么?
行内样式表
-
行内样式:配合JavaScript使用
<div style="color: red; font-size:20px;">这是div标签div>
3.选择器
作用:查找标签，设置样式。
基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
s
3.1 标签选择器
标签选择器:使用标签名作为选择器→选中同名标签同名标签设置相同的样式。
例如:p, h1 , div , a, img…
<style>
p {
color: red;
}
style>
解释说明:
就是说我们设置了p为红色,下面所有需要红色的文字部分,我们都用p来设置
3.2 类选择器
如果我们需要有的是红色,有的是别的颜色,但是我们文字部分用的都是p标签怎么办?
使用类选择器.
作用:查找标签，差异化设置标签的显示效果。
步骤:
- 定义类选择器→.类名
- 使用类选择器→标签添加class=“类名”
模板代码:
<style>
.red {
color: red;}
style>
<div class="red">这是div标签
完整代码举例说明:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/* 选择器 */
.red{
color: rgb(255, 17, 0);
}
style>
head>
<body>
<p>CSS首次学习p>
<p class="red" >CSS首次学习p>
body>
html>
效果如下:
多个类选择器怎么同时使用?
<style>
/* 定义*/
.red{
color: rgb(255, 17, 0);
}
.size{
font-size: 50px;
}
style>
<body>
<p class="red size" >CSS首次学习p>
body>
注意:
- 类名自定义，不要用纯数字或中文，尽量用英文命名.
- 一个类选择器可以供多个标签使用
- 一个标签可以使用多个类名，类名之间用空格隔开
开发习惯:类名见名知意，多个单词可以用–连接，例如:news-hd
3.3 id选择器
作用:查找标签，差异化设置标签的显示效果。
场景:id选择器一般配合JavaScript使用，很少用来设置CSS样式
步骤:
- 定义id选择器→#id名
- 使用id选择器→标签添加id= “id名”
<style>
/* 定义 */
#red {
color: red;
}
style>
<p id="red">红色p>
规则:
同一个id选择器在一个页面只能使用一次
3.4 通配符选择器
作用:查找页面所有标签，设置相同样式。
通配符选择器:*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
*{
color: red;
}
它会让所有的标签都变成红色.
在实际开发过程中的用处?
许多标签或者列表之类的各种各样的格式标签,中间的间距都是不同的,我们可以使用通配符选择器,刷新他们之间的间距为0,然后再统一更改
4. 画盒子
目标:使用合适的选择器画盒子
新属性
| 属性值 | 作用 |
|---|---|
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
代码样例:
<style>
.red{
width: 100px;
height: 100px;
background-color: brown;
}
.orange{
width: 200px;
height: 200px;
background-color: orange;
}
style>
<body>
<div class="red">div1div>
<div class="orange">div1div>
body>
