Web前端一套全部清晰 ⑥ day4 CSS.1 基础选择器、文字控制属性

L_cl

已于 2024-05-03 22:40:45 修改

阅读量1k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：前端前端前端文章标签：前端

于 2024-05-03 10:17:15 首次发布

本文链接：https://blog.csdn.net/m0_73983707/article/details/138325702

后来的我不在抱怨所有的事与愿违都是我能力或者判断力不足仅此而已

—— 24.5.1

一、CSS定义

1. 将CSS放在html文件的<style>标签中

层叠样式表(Cascading style Sheets，缩写为 CSS)，是一种样式表语言，用来描述 HTML 文档的呈现(美化内容)

书写位置:title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

① 语法：
<title>
    CSS 初体验
</title>
<style>
/*选择器{}*/
<p>{
    /*CSS 属性*/
    color red;
}
</p>

</style>
<p>体验 CSS</p>
② 示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初体验</title>
    
    <style>
        /* 选择器 */
        p {
            /* CSS属性 */
            /* 属性名和属性值同时成对出现 -> 键值对 */
            /* color 字体颜色 */
            color: rgba(0, 255, 255, 0.805);
            /* font-size 调整字号 px像素单位 */
            font-size: 27px;
        }
    </style>
    <p>体验CSS</p>
</head>
<body>
    
</body>
</html>
③ 总结

1.CSS书写在什么位置？

head 标签中 title 标签下方

2.哪个标签里面可以书写CSS代码？

style标签

3.CSS代码的书写规则是什么？

选择器{属性名:属性值;}
<title>CSS 初体验</title>
<style>
    p{
        color:red
    }
</style>    
2.CSS引入方式

① 语法：

内部样式表：学习使用

CSS代码写在 style 标签里面

外部样式表：开发使用

CSS代码写在单独的CSS文件中(.css)

在 HTML 使用 link 标签引入
<link rel="stylesheat" href="./my.css">
行内样式：配合JavaScript使用

CSS 写在标签的 style 属性值里
<div style="color:red;font_size:20px;">这是 div 标签</div>
② 示例

CSS文件
/* 这个文件放 CSS 代码 */
/* 选择器 { CSS 属性} */
p {
    color: red;
}
HTML文件
 
 
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 引入方式</title>
    
    <link rel="stylesheet" href="./03.mine.css">
 </head>
 <body>
    <p>这是 p 标签</p>
    
    <div style="color: cadetblue;font-size: 27px;">这是 div 标签</div>
 </body>
 </html>
HTML文件
 
 
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 引入方式</title>
    
    <link rel="stylesheet" href="./03.mine.css">
 </head>
 <body>
    <p>这是 p 标签</p>
    
    <div style="color: cadetblue;font-size: 27px;">这是 div 标签</div>
 </body>
 </html>
③ 总结

1.实际工作中，常用哪种 CSS 引入方式？

外部样式表 .css文件

2.在HTML中，使用哪个标签可以引入外部样式表

link 标签

二、选择器

1.标签选择器

标签选择器：使用标签名作为选择器 -> 选中同名标签设置相同的样式

例如：p、h1、div、a、img……
<style>
    p{
        color:red;
    }
</style>
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewp