web前端学习笔记04-CSS颜色、文本、边框、背景

最新推荐文章于 2024-01-05 00:02:26 发布

喵了个咪蛋儿

最新推荐文章于 2024-01-05 00:02:26 发布

阅读量442

点赞数 1

分类专栏： web前端学习文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_42727838/article/details/106772864

版权

这篇博客详细介绍了CSS颜色的四种表示法，包括颜色名、16进制、RGB和RGBA，并提及了CSS文本设置，如行高的应用。此外，还讨论了边框设置，如圆角和阴影属性，以及背景设置，特别是背景位置的调整技巧。

摘要由CSDN通过智能技术生成

一、CSS颜色表示法

1. 颜色名表示，如：red,blue

2. 16进制数值表示，如：#ff0000红色，这样的也可以简写为#f00，每种颜色取值范围0-9，a-f

3. RGB颜色：红R，绿G，蓝B三个颜色通道的变化，参数取值范围0-255

background-color:rgb(200,100,0)

4. RGBA颜色：红R，绿G，蓝B，透明度A(取值范围0-1)

background-color:rgba(200,100,0,0.5)

二、CSS文本设置

【文本常用CSS样式】

关键字	释义	示例
color	设置文字颜色	`color:red;`
font-size	设置文字大小	`font-size:12px;`
font-family	设置文字字体	`font-family:'微软雅黑';`
font-style	设置文字是否斜体	`font-style:normal;` 、 `font-style:italic;`
font-weight	设置文字是否加粗	`font-weight:normal;` 、 `font-weight:bold;`
line-height	设置文字的行高	`line-height:24px;`
text-decoration	设置文字下划线	常用于a标签去除下划线 `text-decoration:none;`
text-indent	设置文字首行缩进	`text-indent:24px;`
text-align	设置文字水平对齐方式	`text-align:center;` left(居左) right(居右)

&& 利用行高设置单行文本垂直居中：行高设置为父元素的高度

div{
   
    /* html: <div>当记忆的风吹来时，便漾出无边的心澜</div>  */
	width: 500px;
	height: 100px;
	background-color: peachpuff;
	/*利用行高设置单行文本垂直居中:行高设置为父元素的高度*/
	line-height: 100px;
}

三、CSS边框设置

【CSS边框常用属性】

关键字	释义
border:宽度边框样式颜色	三个参数不分顺序，必须都有
border-top:宽度边框样式颜色	单独设置某一边框 top上，bottom下，left左，right右
border-style	边框样式：solid实线，dotted点状线，dashed虚线
border-radius	边框圆角（CSS3）
box-shadow:x轴偏移 y轴偏移模糊度扩散程度颜色	设置阴影（CSS3）

&& 圆角设置： 参数可以为px值或百分数

.item{
   
	/* html: <div class="item"></div> */
	width: 200PX;
	height: 200PX;
	border: 3px solid green;
	
	/*设置圆角——————————————————*/
	border-radius: 10px;
	/*也可以给2个参数(对角：左上右下/右上左下)*/
	border-radius: 10px 30px;
	/*也可以给4个参数(顺时针：依次为左上/右上/右下/左下)*/
	border-radius: 10px 30px 50px 70px;
	/*利用圆角制作圆形：宽高一致，圆角参数50%*/
	border-radius