3.网页前端入门之style属性

发布时间：2024年01月10日

标签里有个style属性，就是标签的样式属性，这个属性后面会引伸到div+css。所以有的一切都是由这个style属性产生，可以说光学style属性，就能单独成一门学问。

样式style
了解样式，先要来搞清楚元素是什么，标签在网页中显示的内容就是元素，一个链接，图片，无序列表。一个元素里又可以嵌套一个元素，比如无序列表元素里，就有许多的项元素。那么这些元素，我们都可以用一个矩形包起来。
看代码和图例：
<html>
<head><title>样式</title></head>
<body>
<a?href="http://www.baidu.com">百度</a> 
<img?src="win.jpg"> 
<ul>
?<li>我也是一个元素</li>
?<li>ul元素里的元素</li>
</ul>
</body>
</html>

而样式就可以描述这些元素的属性，比如元素里面的文本颜色，字体大小，背景图片，有无边框，以及它的位置,相对于包含它的元素，
或者相对于它的前一个同级元素。
那要怎么描述呢，在标签里指定style的属性就可以了，然后再给他赋予具体的样式属性。

然后这种是属于行内样式。

样式对所有元素都有效，而元素是标签的外观化，当然所有标签都有style（样式）属性了。
相对于标签原有的属性，有些都可以用样式来代替，比如font标签的元素，它的color，size属性，我也可以用style来代替。
替换示例：
<font?style="color:green;font-size:13px;">这是一个使用style样式的元素
上面的意思是，在font元素内，字体都是绿色，大小为13像素。

效果图：

记住style内属性的格式，是属性加冒号，然后是属性值，属性值没有引号，后面以一个分号结尾color:green;。
而标签属性是这样指定的属性加等号，然后是属性值，属性值有引号，以空格分开每一个属性color="green"。
当然html不怎么严谨，标签属性你不用引号也可以。标准还是有引号的。?

注意：你如果直接复制我的代码没有效果的话，可能是编码问题，可以用vscode打开html检查出来。或自己手打。

2.使用style去掉超链接原有的下划线

<a?href=""?style="text-decoration:none">测试有没有下划线</a>

text-decoration属性可以决定一个元素的文本有无下划线，有下划线就是text-decoration:underline

比如定义body元素内的文本内容有下划线就是:<body?style="text-decoration:underline;">

如果属性有“冲突”的话，离元素最近的属性是有效的，比如body样式设置文本颜色为红色，而设置为蓝色,

那么p元素里面的文本内容为蓝色。

<body?style="color:red;">

<p?style="color:blue;">

123456

</body>

效果图：

到这里可以看得出，样式决定标签的属性，元素的外观，显示方式。那么不同的标签其实可以看作是不同样式属性的集合。

比如标签就包含有下划线样式。

（PS：大家可以去下载个Dreamweaver软件来编写HTML代码，里面的提示功能很好。它也可以编写asp.net，注册的序列号到百度搜一个就可以了）

?元素的边框
我们先来看看边框都有哪些属性，边框颜色border-color,边框样式border-style,边框宽度border-width
默认边框样式都隐藏的hidden,所以我们就看不到元素边框，我们给border-style指定solid样式，就可以看到了。
示例：

<body>
<pre?style="border-style:solid;?border-color:#33FFCC;?border-width:1px;">
11111111111111111111111111111
2222222222222222222222222222
33333333333333333333333333333
</pre>
</body>?

可以看到pre元素的边框宽度是依据浏览器的宽度来的，而a元素的边框是依据文本的宽度来的，可以用width属性显式指定元素的宽度。

PS:像上面这种宽度区别，其实就是块元素和内联元素的区别，这个也是可以更改的，这个后面会再详细介绍。
另：上面的边框宽度，样式，颜色，也可以直接用border指定，如style="border:1px?solid?#33ffcc",里面用空格区分开。
#33ffcc是颜色值，是十六进制的，刚好六位，每两位的范围是0至255(十六进制的)对应着R?G?B。
边框的颜色，宽度也可以具体到每一个边，如顶部的边框2像素宽，颜色为红色的是：
style="?border-top-width:2px;?border-top-color:red;"?

好了，还有更多的样式属性，你们也可以自己去网上找一下，然后可以实验一下。

具体搜css样式大全，css样式手册之类的。

文章来源:https://blog.csdn.net/d3582077/article/details/135489256
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！