web前端day2-----CSS分区标签,边框标签(样式属性等)

最新推荐文章于 2023-08-03 16:43:21 发布

OrdnAry

最新推荐文章于 2023-08-03 16:43:21 发布

阅读量537

点赞数 1

分类专栏：学习文章标签： html css

本文链接：https://blog.csdn.net/OrdnAry/article/details/107342484

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

分区

<!-- CSS 作用:修饰网页内容
	语法规范:   样式声明 样式属性:属性值
				多个样式声明用分号 ; 隔开
	1.内联样式:在修饰的标签中添加一个标签属性style,样式声明为属性值
		<标签名称 style="样式声明;样式声明">
	2.内部样式:  一般在head标签中添加一个style标签,标签中嵌套CSS语法
		<head>
			<style>
				选择器{
						样式声明;样式声明;				
				}
			</style>
		</head>
	选择器: 规定哪些标签可以使用样式
	3.外部样式: 单独CSS文件,将CSS文件引入到HTML文档中
	   CSS文件中写CSS语法: 选择器{ 样式声明;样式声明;}
						  <link href="引入CSS文件路径" rel="stylesheet">
	
	语法特点:
	1.继承性:子元素会继承父元素的一些样式(尺寸宽高边框位置不能继承)
			 如果子元素自己的样式和继承父元素样式有冲突,用自己的;
	2.层叠性:多种方式给同一个标签设置样式,样式不冲突,都可以用;
	如果样式冲突,看优先级;
	3.优先级: 内联样式>外部样式=内部样式>浏览器默认样式(看浏览器先读谁,后读的优先级高,覆盖掉了.)
			  优先级等同,后定义的样式属性值会覆盖掉前面定义的样式属性
	
	常用的CSS样式属性:
	1.尺寸: width宽度属性  height高度属性  取值: 数字+单位
			尺寸单位: cm厘米  mm毫米 in英寸;  px像素(固定尺寸)
			百分比:相对于父元素尺寸百分比
			移动端: em相对父元素;rem相对根元素
	注意:不是所有的元素都可以设置宽高属性
		 所有的块级元素可以设置宽高属性,没有给块级元素设置宽度,默认100%;
		 行内元素尺寸是由内容来决定,但是个别行内元素可以设置宽高属性调整尺寸(img图片,表单控件),这样的行内元素叫做行内块元素
	
	标签的显示方式:是否独占一行
	块级元素: 独占一行,从上到下显示;
		div分区元素,p段落标签,标题标签,列表ol ul li
	行内元素: 不独占一行,从左到右显示;
		样式标签 b s i u sub sup img图片,a超链接,表单控件
	
	
	2.边框: border属性: 粗细 样式 颜色
	-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
   <link href="外部样式border.css" rel="stylesheet"/>
  <style>
		div{
			color: red;
			background-color:pink;
			width:/*1200px*/80%;/*1200像素宽度*/
		}
		p{
			color:blue;
			background-color:red;
			width:50%
		}
		a{
			background-color:green;
			width:1000px;
			height:500px;
			font-size:50px
		}
  </style>
 <!--引入外部样式border-->
 </head>
 <body>
<!--style标签的样式-->
	<div style="background-color:green;font-size:50px">
	div块级分区元素
	<p>段落标签p</p>
	</div>	
	<div>第二个div标签</div>
	<a>超链接a标签</a>
 </body>
 <b>加粗</b>
</html>

在这里插入图片描述
**

边框

<!--2.边框: border属性: 粗细 样式 颜色(简化写法)
	单属性定义:
		边框粗细border-width: 取值: 数字+单位px
		边框样式border-style: 取值: solid实线 dotted虚线(点) dashed虚线(线)
		边框颜色border-color: 取值: 合法颜色值
	单边定义:border-方向词
			 border-left/right/top/bottom: 取值 width style color
	单边单属性定义:
			 border-left/right/top/bottom-width/style/color:
	-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
		div{
			width:100px;
			height:100px;
			border:5px solid black;
			border-width:10px;
			border-style:/*dotted点的虚线*/dashed;
			border-color:red;
			border-left:20px dotted green;
			border-bottom-color:blue;
		}
  </style>
 </head>
 <body>
  <div>
	
  </div>
 </body>
</html>

在这里插入图片描述

OrdnAry

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端day2-----CSS分区标签,边框标签(样式属性等)

**分区**<!-- CSS 作用:修饰网页内容语法规范: 样式声明样式属性:属性值多个样式声明用分号 ; 隔开 1.内联样式:在修饰的标签中添加一个标签属性style,样式声明为属性值 <标签名称 style="样式声明;样式声明"> 2.内部样式: 一般在head标签中添加一个style标签,标签中嵌套CSS语法 <head> <style> 选择器{ 样式声明;样式声明; }
复制链接

扫一扫