css学习笔记

最新推荐文章于 2024-04-02 12:21:27 发布

HeartdreamX

最新推荐文章于 2024-04-02 12:21:27 发布

阅读量167

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/HeartdreamX/article/details/124684716

版权

本文详细介绍了CSS的概念，包括其在HTML中的作用，样式表的类型如外部、内部和行内样式。还探讨了CSS的选择器，如标签选择器、类选择器、ID选择器、后代选择器、子选择器、相邻选择器、属性选择器、公共选择器、通配符选择器以及伪类和伪对象选择器，展示了如何通过这些选择器实现精准的样式控制。

摘要由CSDN通过智能技术生成

CSS概念
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
html 在一个网页中负责的事情是一个页面的结构
css(层叠样式表) 在一个网页中主要负责了页面的数据样式。

CSS行内样式
在任何标签里添加 style=“样式”

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css行内样式</title>
</head>

<body>
    <h3>
        <font color="red">老妹儿01</font>
    </h3>
    <h3>
        <font color="red">老妹儿02</font>
    </h3>
    <h3>
        <font color="red">老妹儿03</font>
    </h3>
    <h3 style="color: #00FF00;">老妹儿04</h3>
    <h3 style="color: #00FF00;">老妹儿05</h3>
    <h3 style="color: #00FF00;">老妹儿06</h3>
</body>

</html>

CSS内部样式
在中添加

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css内部样式</title>
    <style>
        /* 内部样式 */
        h3 {
     
            color: #00FF00;
        }
    </style>
</head>

<body>
    <h3>老妹儿01</h3>
    <h3>老妹儿02</h3>
    <h3>老妹儿03</h3>
</body>

</html>

CSS外部样式
在外部创建css文件在里面写css样式写法和内部样式一样然后将文件添加到中

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css内部样式</title>
    <link rel="stylesheet" href="./css/03.css">
</head>

<body>
    <h3>老妹儿01</h3>
    <h3>老妹儿02</h3>
    <h3>老妹儿03</h3>
</body>

</html>

CSS标签选择器
一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        p{
     
            color: #5b9e4c;

最低0.47元/天解锁文章

HeartdreamX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记

CSS概念CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 中外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一html 在一个网页中负责的事情是一个页面的结构css(层叠样式表) 在一个网页中主要负责了页面的数据样式。CSS行内样式在任何标签里添加 style=“样式”<!DOCTYPE html><html lang="zh-
复制链接

扫一扫