CSS快速入门

JSU_曾是此间年少

已于 2022-10-19 10:10:00 修改

阅读量97

点赞数 3

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

于 2022-10-18 21:35:21 首次发布

本文链接：https://blog.csdn.net/m0_72678953/article/details/127397227

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三种CSS样式

也可以在行内定义样式，称为内联CSS，是一种最简单直观的用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <div style="color:red;">123。</div>
    <div style="color:yellow;">骄傲的少年技能就。</div>
    <div style="color:pick;">数据是什么非你莫属。</div>

    <p style="color:green">这是一个段落</p>
</body>
</html>

演示样式

缺点是不好维护，只能作用于一个页面

内部CSS

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{
			color:red;
			text-align:center;
			}
        p{color:blue;}
    </style>
</head>
<body>
    <div>123。</div>
    <div>骄傲的少年技能就。</div>
    <div>数据是什么非你莫属。</div>
    <p>这是一个段落</p>
</body>
</html>

需要什么标签变成什么颜色，在head标签的style标签里面设计就好了

缺点是自由度不够高

外部CSS

其实就是将原先写在style里面的元素放在一个.css里面

我们新建一个123.css

在html里面调用

注意要保存

和内部样式一个效果

优先级

三中CSS样式优先级分别为

1.内联样式最大

2.内部样式和外部样式优先级一样

对于最后两种，谁写在最后就是显示哪种样式

3.默认样式优先级最低

下面我们大部分采用外部CSS样式

CSS实现控制文本大小写

模板为

.HTML文件
<P class="自己给定的名字">

    英文文本内容...

</P>

.CSS文件
p.自己给定的名字 {
	text-transform: uppercase;
	text-transform: lowercase;
	text-transform: capitalize;
}

效果:

实时改变，挺不错的