您的位置: 首页  >  文章  >  初探DIV+CSS

初探DIV+CSS

分类: 文章 • 2024-02-18 16:25:22

一、Div与Span及两者转化

1、Div
div是一个html标签，是一个块级元素（单独显示一行），单独使用没有任何意义，必须要结合css使用，主要用于户页面布局
2、Span
span是一个html标签，是一个内联元素（显示一行），单独使用没有任何意义，必须要结合css使用，主要用于对括起来的内容进行样式修饰
3、两者转化

二、Css概述

1、CSS（Cascading Style Sheets）:层叠样式表
样式：给Html标签添加需要显示的效果
层叠：使用不同的添加方式给同一个html标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签
2.作用
主要用于设置Html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面布局等外观显示样式
3、小结
css可以使html页面更灵活，更容易绘制出需要的结构

三、Css的样式规则

样式具体的格式：选择器{属性1：属性值；
属性2：属性值…}
选择器：用于指定css样式作用的html对象。花括号里是对该对象设置的具体样式，属性和属性值以键值对方式出现。
初探DIV+CSS

四、Css的样式使用注意

1.css样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。
2.多个属性之间必须用英文分号隔开，最后一个属性后的分号可省略，但是为了便于添加新样式最好保留。
3.如果属性的值多个单词组成且中间包含空格，则必须为这个属性值加上英文引号。

p{
	font-family:"Times  New  Roman";
}

五、引入Css样式

1、行内样式
行内样式是通过标签的style属性来设置元素样式

  <a  style="color:#f00; font-size:30px">标签</a>

2、内部样式(内嵌式)
内部样式又称为内嵌式，是将css代码集中写在Html文档的<head>头部标签中，并使用<style>标签定义

 <style type="text/css">
	 		body{
	 					background-color:#ddd;
			}
	 </style>

3、外部样式（链入式）
外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签链接到Html文件中。
（1）.在文件<head>标签中加
style固定值，表示css类型
rel固定值，href表示文件位置。

<link rel="stylesheet"   type=" text/css"  href="demo.css"  />

（2） 在扩展名为.css后缀名的文件中

div{
	border: 1px solid red;
	width:500px;
	height: 250px;
	background-color: green;
}

六、选择器

1、元素选择器
格式：标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

h1{
	color:#f00;
	font_size:50px;
}
.......
<h>文本<h/>

2、ID选择器
格式：#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

  #demo1{
    	color:#0f0;
    }
    ......
    <h1 id="demo" >文本<h/>

3、类选择器
格式：.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

 .demo1{
    	color:#0f0;
    }
    ......
    <h1 class="demo" >文本<h/>

4、属性选择器（可过滤）
在标签后面使用中括号标记;
格式：标签名【标签属性=“标签属性值”】{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

<style>
 input[type="text"]{
	background-color:yellow;
}
 input[type="password"]{
	background-color:yellow;
}
</style>

5、包含选择器（可过滤）
两个标签之间使用空格，给指定的父标签的后代标签设置样式
父标签 后代标签{属性1：属性值1；属性2：属性值2；属性3：属性值3}
该选择器是对元素选择器的扩展，对标签内部所有后代标签进行过滤

<style>
	#d1 div{
		color:red;
	}
</style>

七、常见属性

1、边框和尺寸：border、width、height
（1）border:设置边框样式
格式：宽度 样式 颜色
例：style=border"1px solid #f00"
(2)width、height:用于设置标签的宽度、高度

<style type="text/css">
		div{
				border:1px solid #000;
				width:200px;
				height:200px;
		}
	</style>

2、字体:color、font-size

<div style=“color:red;font-size:20px;”>文本</style>

3、背景色background-color

<ul  style=“background-color:#999;color:#fff;”>
	<li></li>
 	<li style=“background-color:"></li>
	 <li></li>
</ul>

4、转换display
html众多标签中一般分为两类；块标签跟行内标签
常见的属性值：
inline：此元素将显示为行内元素
block：此元素将显示为块元素
inline-block;将对象呈递为内联对象，但对象的内容作为快对象传递；
none；此元素将被隐藏，不显示，也不占用页面空间。
5、布局：float
(1)通常默认的排版方式将页面的元素从上倒下一一罗列，而实际开发中需要左右方式排版就需要用到浮动。
选择器{float:属性值}
(2)常用值
left:元素向左浮动
right:原数向右浮动
none：元素不浮动
6、clear
(1)浮动元素不占用原文档的位置，所以对页面中的其他元素的排版产生影响，避免影响。需要使用clear属性进行清除浮动
选择器{clear：属性值}
初探DIV+CSS

八、盒子模型

css框模型（box Model）规定了元素框处理元素内容、内边距、边框、边距的方式
初探DIV+CSS

1、内边距padding
(1)所有的h1元素的各边都有10像素的内边距；h1{padding:10px}
(2)还可以按照上右下左的顺序分别设置各边的内边距，各边均可使用不同的单位或百分比h1{padding:10px 0.25em 20%}
(3)单边框距属性
padding-top:上内边框
padding-right;右内边框
padding-bottom;下内边框
padding-left;左内边框
2、外边距margin
(1)可按照上右下左的顺序分别设置各边框，同内边框的边距
(2)单边边距属性
margin-top;上边边距
margin-right:右边边距
margin-bottom;下边距
margin-left:左边边距

以上为初学总结笔记，问题望指正

相关推荐