CSS样式表补充

最新推荐文章于 2024-09-20 16:14:32 发布

SaltedVegetable

最新推荐文章于 2024-09-20 16:14:32 发布

阅读量432

点赞数

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/SaltedVegetable/article/details/86181300

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS样式表

1.表单属性

placeholder=" " 文本框提示

属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

<input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>

运行结果

required属性必填

规定必需在提交之前填写输入字段

<input type="text" name="usr_name" required="required" >

2.选择器

class选择器

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

在上面的代码中，两个元素的 class 都指定为 important

.important {color:red;} 
/*应用样式*/

结合元素选择器
类选择器可以结合元素选择器来使用。

p.important {color:red;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配

通用选择器

使用一个（*）号指定，它的作用是匹配html中所有标签元素

*{color:red;}

3.块级元素和行内元素

块级元素

包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

行内元素

包含a、span、em、strong、b、i、u、label、br
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
span标签：主要用来对行内的文字进行一些样式以及其他的操作；
em标签：一般用来对文字进行强调，使用斜体体现出来；
strong标签：一般用来对文字进行强调，使用加粗字体体现出来；

块级元素与行内元素转换

一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）
块级元素可以设置margin,padding属性，行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果。

当行内元素要设置行高的时候需转换成块级元素:

display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素

4.盒子模型

网页可以看成由一个个"盒子"组成

层次关系

在这里插入图片描述
第1层：盒子的边框(border)，
第2层：元素的内容(content)、内边距(padding)
第3层：背景图(background-image)
第4层：背景色(background-color)
第5层：盒子的外边距(margin)

从这个层次关系中可以看出，当同时设置背景图和背景色时，背景图将在背景色的上方显示

水平居中和垂直居中

块级元素的水平居中：margin:0px auto;
文字内容的水平居中：text-align: center;
垂直居中：
常见的单行文字的垂直居中可设置文字所在行的height与行高样式属性一致：

div{
width: 400px;
height: 400px;
line-height: 400px;/*行高与div高度一致*/
}

float浮动属性

文档流
浏览器根据元素在html文档中出现的顺序，从左向右，从上到下依次排列
float: 浮动方向(left、right、none);
left为左浮动、right为右浮动、none是默认值表示不浮动
设置元素的浮动，该元素将脱离文档流，向左或向右移动直到它的外边距碰到父元素的边框或另一个浮动元素的边框为止
让2个块级元素在同1行，2个块级元素兄弟关系，只会影响后面，每个都要加浮动
clear 清除浮动
clear属性的取值：rigth、left、both、none

1-2-1结构

4个div
在这里插入图片描述
中间2个div 2个浮动float:left

最下面消除float clear:both

百度导航栏示例

设置基础框架

<body>
	<div class="nav">
		<ul>
			<li><a href='#'>网页</a></li>
			<li><a href='#'>资讯</a></li>
			<li><a href='#'>贴吧</a></li>
			<li><a href='#'>知道</a></li>
		</ul>
	</div>
</body>

css样式设置（从大的往小的写）
参考百度导航栏格式时可以用QQ截图参考大小和RGB设置
body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或padding值的，加上这句就可以删除浏览器这些默认值，方面后面的设置。

* {
	margin: 0;
	padding: 0;
}

设置整体背景布局

.nav {
	background: #F5F5F5;
	border-top: 1px solid grey;
	margin-top: 80px;
	height: 80px;
	padding-left: 120px;
}

将列表格式清除不然文字前会有小方框

.nav ul {
	list-style: none;
}

将列表每条信息从行变成列

.nav ul li {
	float: left;
}

设置每个超链接
注意变成块级元素可以设置行高
注意设置水平居中和垂直居中
*box-sizing: border-box;*为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

.nav ul li a {
	color: rgb(102, 102, 102);
	font-size: 20px;
	width: 100px;
	height: 80px;
	display: block;
	line-height: 80px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	font-family: "微软雅黑";
}

当鼠标停留时的效果

.nav ul li a:hover {
	color: black;
	border-bottom: 5px solid rgb(50, 135, 255);
}

当按下超链接时实现的效果

.nav ul li a:active {
	color: black;
	font-weight: bold;
	border-bottom: 5px solid rgb(50, 135, 255);
}

实现效果

在这里插入图片描述
鼠标停留
鼠标按下