2、css

最新推荐文章于 2024-06-29 23:22:36 发布

隆隆不会敲代码

最新推荐文章于 2024-06-29 23:22:36 发布

阅读量69

点赞数

分类专栏： JavaWeb基础文章标签： css

本文链接：https://blog.csdn.net/qq_41207136/article/details/107464669

版权

JavaWeb基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

二、css

css定义：层叠样式表，用来设置网页的元素的样式

在html中引入

<!--1.样式直接写在标签的style里，不推荐-->
<p style="color:red;">hahaha</p>

<!--2.放在head里面-->
<style tyle="text/css">
	/*css注释
    	选择器{
    		//这里定义要改变的样式
    		样式名1：样式值1；
    		样式名2：样式值2；
    	}
    */
    p{
        color:blue;//字体颜色
        font-size:20px;//字体大小
       //...
    }
</style>

<!--3.在直接引入外部文件-->
<link rel="stylesheet" type="text/css" href="css资源的路径">

<!--样式优先级:1>2>3-->

css选择器

<!--
1. 标签选择器

标签名{
样式
}
所有相同的标签都变样式
–>

.class类名{
样式
#id值{
样式
}

组选择器里的样式一致
选择器1，选择器2…{
样式
}


3. css常用样式

```html
<!--1.颜色 color:(颜色)||#000-FFF||#000000-FFFFFF-->

<!--2.宽度和高度：
	
-->
<!--div其实就是一个长方形，div里面常放一些元素
	要使用百分比进行设置时，父元素必须要有高度，宽度不受影响
	
-->
<style type="text/css">
    div{
        border:1px solid red;//边框厚度 性质 颜色
        width:100px; //宽度
        height:100px; //高度
        height:50%; //高度百分比表示
    	background-color:grey;//设置背景演示
        margin-left:auto;
        margin-right:auto;
        text-align:center;//文本居中
    }
    a{
        text-decoration:none;//超链接去下划线
    }
    table{
        border:1px solid red;//给表格设置边框属性
    	border-collapse:collapse;//合并边框线
    }
    ul{
        list-style:none;//设置无序列表前的点没有
    }
</style>
<div>
</div>

练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.inputitem{
		width:150px;
	}
</style>
</head>
<body>
	<form action="success.html">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" class="inputitem"/></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="psw" class="inputitem"/></td>
			</tr>
			<tr>
				<td><input type="submit" name="tijiao"/></td>
			</tr>
		</table>
	</form>
</body>
</html>

隆隆不会敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、css

二、csscss定义：层叠样式表，用来设置网页的元素的样式在html中引入<p style="color:red;">hahaha</p><style tyle="text/css"> /*css注释选择器{ //这里定义要改变的样式样式名1：样式值1；样式名2：样式值2；
复制链接

扫一扫