静态网页开发技术之CSS

最新推荐文章于 2023-06-06 17:47:50 发布

是志明呀

最新推荐文章于 2023-06-06 17:47:50 发布

阅读量621

点赞数 1

分类专栏： Java Web 文章标签： CSS javaweb 笔记前端

本文链接：https://blog.csdn.net/weixin_44262126/article/details/113663054

版权

1）文笔有限，如果发现博客有书写有误的地方恳请读者直言不讳，我一定会第一时间改正。
2）代码的具体实现可以参考代码中的注释，如果由于注释不清楚而不明白相应原理，可以与作者私聊。码字不易，有兴趣的小伙伴点个赞呗，大家相互学习。

1 定义

CSS 的全称是 Cascading Style Sheets，即层叠样式表。它是用于增强网页样式，并允许将样式信息与网页内容分离的一种标记性语言。

2 CSS的语法规则

在这里插入图片描述
其中，语法各部分的含义如下：

选择器： 浏览器根据选择器决定受 CSS 样式影响的 HTML 标签
属性： 需要改变的样式名，并且每个属性都有一个值。
声明： 属性和值被冒号分开，并由花括号包围，这样就组成了一个完的样式声明。

3 CSS 与 HTML的三种结合方式

利用一个实例来介绍三种结合方式的区别。

需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。

1）直接在 HTML 的标签的 style 属性上设置来修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。-->
    <div style="border: 1px solid red;">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>

2）在 head 标签中，使用 style 标签来定义各种自己需要的 CSS 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码."text/css" 是固定的-->
    <style type="text/css">
        /* 需求：分别定义两个 div、span 标签，分别修改每个div 标签的样式为：边框1 个像素、实线、红色。*/
        div{
    
            border: 1px solid

最低0.47元/天解锁文章

是志明呀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
静态网页开发技术之CSS

1 定义CSS 的全称是 Cascading Style Sheets，即层叠样式表。它是用于增强网页样式，并允许将样式信息与网页内容分离的一种标记性语言。2 CSS的语法规则其中，语法各部分的含义如下：选择器：浏览器根据选择器决定受 CSS 样式影响的 HTML 标签属性：需要改变的样式名，并且每个属性都有一个值。声明：属性和值被冒号分开，并由花括号包围，这样就组成了一个完的样式声明。3 CSS 与 HTML的三种结合方式利用一个实例来介绍三种结合方式的区别...
复制链接

扫一扫