一、前端基础-css-css的属性操作一
原创
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:after{
content: "("attr(href)")";
}
</style>
</head>
<body>
<!-- css属性操作一
1、颜色属性
2、字体属性
3、背景属性
4、文本属性
5、边框属性
6、列表属性
7、display属性
8、外边距和内边距
-->
<!--颜色属性
1、通过英文单词设置
2、通过颜色编码设置
3、通过rgb设置（红绿蓝）
4、通过rgba设置（红绿蓝透明度）
-->
<p style="color: red">通过英文单词设置颜色</p>
<p style="color: #0000ff">通过颜色编码设置颜色</p>
<p style="color: rgb(0,255,0)">通过rgb设置颜色</p>
<p style="color: rgba(125,125,125,0.3)">通过rgba设置颜色</p>
<!-- 字体属性
1、字体大小
2、字体样式
3、字体风格
4、字体加粗
-->
<p style="font-size: 20px">字体大小</p>
<p style="font-style: italic">字体样式</p>
<p style="font-family: 宋体 serif">字体风格</p>
<p style="font-weight: 900">字体加粗</p>
<!-- 背景属性
1、背景颜色
2、背景图片
1、引用图片background-image
2、平铺方式background-repeat
3、背景大小background-size
4、背景图片居中
5、可以直接使用background设置前面的属性
-->
<p style="background-color: aqua">背景颜色</p>
<p style="height: 200px;background-image: url(?developer/article/1942730/jiqimao.jpg);background-repeat: no-repeat;background-size: auto;background-position: center">背景图片</p>
<p style="height: 200px;background: url(?developer/article/1942730/jiqimao.jpg) no-repeat center"></p>
<!-- 文本属性
1、背景颜色 background-color
2、文本居中（位置）text-align
3、行高 line-height
4、字母间距 letter-spacing
5、单词间距 word-spacing
6、首字母大写 text-transform: capitalize
-->
<p style="background-color:slategray; text-align: center;line-height: 50px;letter-spacing: 5px;word-spacing: 10px;text-transform: capitalize">文本属性abc bcd cdf efg</p>
<!-- 边框属性
1、边框样式 border-style
2、边框颜色 border-color
3、边框宽度 border-width
4、可以使用border设置上面的属性
-->
<p style="border-style: dashed">边框样式</p>
<p style="border-color: rebeccapurple;border-style: solid">边框颜色</p>
<p style="border-width: 5px;border-style: solid">边框宽度</p>
<p style="border: darkgoldenrod dashed 5px">border简写</p>
<!-- 列表属性
1、圆圈样式
2、字母样式
-->
<ul style="list-style: circle">
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
<ul style="list-style: upper-alpha">
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
<!-- display属性
1、none
2、block
3、inline
-->
<p style="display: none">内容将不会被显示</p>
<p style="display: inline">将块级元素设置为内联元素</p>
<p style="display: inline">将具有内联元素的特点，例如不会自动换行</p>
<span style="display: block">将内联元素设置为块级元素</span>
<span style="display: block">将具有块级元素的特点，例如自动换行</span>
<!-- 外边距和内边距
1、margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
1、margin:10px 5px 15px 20px;-----------上 右 下 左
2、margin:10px 5px 15px;----------------上 右左 下
3、margin:10px 5px;---------------------上下 右左
4、margin:10px; ---------------------上右下左
2、padding：用于控制内容与边框之间的距离；
3、Border(边框)：围绕在内边距和内容外的边框。
4、Content(内容)：盒子的内容，显示文本和图像，content属性与before及after伪类配合使用，来插入生成内容。。
-->
<div style="margin: 2px;padding: 5px;border: coral;background-color: cadetblue">外边距与内边距</div>
<!-- Content
1、样式在head添加
-->
<p><a href="https://www.baidu.com">百度</a></p>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读