html学习-第二集(CSS)
2024-10-07 00:47:06
head标签里面添加style标签,可以为标签添加样式
id选择器
类选择器
标签选择器
层级选择器
组合选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:#2459a2;
height:48px;
}
.c1{
background-color:#2889a2;
height:20px;
}
div{
background-color:black;
color:white;
} span div {
background-color:red;
color:black;
} input[type='text']{width:100px;height:200px;} </style> </head>
<body>
<div id="i1">fffffff</div>
<span class="c1">ddddddd
<div>ututututu</div>
</span>
<div id="i1">ggggggg</div> <input type="text">
<input type="password">
</body>
</html>
样式优先级问题
标签上的style优先,其他编写顺序,就近原则,后写的优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c2{
font-size:28px;
color:black;
}
.c1{
background-color:red;
color:white;
} </style>
</head>
<body>
<div class="c2 c1" style="color:pink;">adafaf</div>
<div class="c2 c1" style="color:pink;">adafaf</div> </body>
</html>
CSS文件用法
CSS文件
common.css
c2{
font-size:28px;
color:black;
}
.c1{
background-color:red;
color:white;
}
然后在html文件里面引用css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<div class="c2 c1" style="color:pink;">adafaf</div> </body>
</html>
CSS边框
<div style="
height:48px; 高度
width:70%; 宽度 像素 百分比
border:1px solid red; 边框
font-size:16px; 字体大小
text-align:center; 水平方向居中
vertical-align:middle;
line-height:48px; 垂直方向根据标签高度居中
font-weight: bold; 字体加粗
">fdffdffd</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border:1px solid red;">adfdfdfdf</div>
<div style="height:48px;
width:70%;
border:1px solid red;
font-size:16px;
text-align:center;
vertical-align:middle;
line-height:48px;
font-weight: bold;
">fdffdffd</div>
</body>
</html>
CSS float样式
简单例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
height:38px;
background-color:#dddddd;
line-height:38px;
}
</style>
</head>
<body style="margin:0 auto;">
<div class="pg-header">
<div style="width:980px;margin:0 auto;">
<div style="float:left;">收藏本站</div>
<div style="float:right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="width:300px;border:1px solid red;">
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left;"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
CSS display样式
可以将块级标签和行内标签转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:red;display:inline;">asdf</div>
<span style="background-color:red;display:block;">asdf</span>
</body>
</html>
注意:
行内标签 无法设置宽度 高度 padding margin
块级标签 设置宽度 高度 padding margin
display样式还有一个inline-block属性
display:none让标签消失
内边距和外边距
padding margin(0.auto)
边距,
内边距 padding
外边距 margin
结束
最新文章
- 【.net 深呼吸】序列化中的“引用保留”
- windows查看端口占用以及关闭相应的进程
- iOS 工程功能实现之好用的第三方
- win7、win8上SaveFileDialog窗口跳不出的问题
- Oracle双实例切换
- JS-002-修改元素属性(以按钮示例)
- iOS UITableView的一些方法
- Web前端设计:Html强制不换行<;nobr>;标签用法代码示例
- ASP.NET Core (一):简介
- windows phone 8.1开发:(消息弹出框)强大的ContentDialog
- Java基础总结--面向对象1
- Docker最全教程——数据库容器化(十)
- hyperledge工具-cryptogen
- 性能测试十六:liunx下jmete配置环境变量
- 配置完centos 6以后,大概需要安装的软件(主要是yum)
- Qt 反射
- Jmeter 重要测试指标释义
- 监控SQL Server正在执行的SQL语句和死锁情况
- codeforces 710A A. King Moves(水题)
- puppet开源的软件自动化配置和部署工具——本质就是CS,服务端统一管理配置