CSS学习笔记

最新推荐文章于 2022-11-10 11:19:11 发布

JackWangCode

最新推荐文章于 2022-11-10 11:19:11 发布

阅读量280

点赞数

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

本文链接：https://blog.csdn.net/weixin_47441922/article/details/114781279

版权

CSS

1.css技术简介

详细情况请见文档css2.0.chm

定义：层叠样式表，cascading style sheet

用途：用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

2.css语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l4hdIpSU-1615693576595)(https://i.loli.net/2021/03/13/vdarWHB3hKbyqVu.png)]

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue} 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号).注：一般每行只描述一个属性

备注：CSS 注释和java的多行注释相同

3.css和html的3种结合方式

3.1内联样式

在标签的 style 属性上设置”key:value value;”，修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
    <div style="border: 1px solid red; height: 100px;width: 100px;background-color: green;text-align: center;" >div 标签 1</div>
    <div style="border: 1px solid red;">div 标签 2</div>
    <span style="border: 1px solid red;">span 标签 1</span>
    <span style="border: 1px solid red;">span 标签 2</span>
</body>
</html>

问题：这种方式的缺点？

如果标签多了。样式多了。代码量非常庞大。
可读性非常差。
Css 代码没什么复用性可方言。

3.2内部样式表

在 head 标签中，使用 style 标签添加css代码

格式如下：

xxx {
Key : value value;
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- style标签专门用来定义css样式代码-->
    <style type="text/css">
        /*总体设置div和span的样式就行了*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style&

最低0.47元/天解锁文章

JackWangCode

关注

0
点赞
踩
0

收藏

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

CSS1.css技术简介详细情况请见文档css2.0.chm定义：层叠样式表，cascading style sheet用途：用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言2.css语法[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l4hdIpSU-1615693576595)(https://i.loli.net/2021/03/13/vdarWHB3hKbyqVu.png)]选择器：浏览器根据“选择器”决定受 CSS 样式影响的
复制链接

扫一扫