day2_css
day2_css
1css引入方式
如何在html页面中写css代码
css引入方式
1 使用style标签 写css代码
2 使用link标签 <link rel="stylesheet" href="./css/mystyle.css"> 引入css文件
3 元素上直接使用style属性编辑样式
覆盖规则
style属性 覆盖另外两种
style标签 link标签 后加载的覆盖先加载的
注意:html的通用属性
通用属性
id 给元素起标记
style 给元素加样式
class 给元素加样式类别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
通用属性
id 给元素起标记
style 给元素加样式
class 给元素加样式类别
css引入方式
1 使用style标签 写css代码
2 使用link标签 <link rel="stylesheet" href="./css/mystyle.css"> 引入css文件
3 元素上直接使用style属性编辑样式
style属性 覆盖另外两种
style标签 link标签 后加载的覆盖先加载的
-->
<link rel="stylesheet" href="./css/mystyle.css">
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>要想健康又长寿</p>
<p>抽烟喝酒吃肥肉</p>
<p style="color: yellow;">晚睡晚起不锻炼</p>
<p>常与异性交朋友</p>
<img src="./imgs/image.png">
</body>
</html>
2css语法结构
选择器 根据元素特征找到需要修饰的元素
样式 和样式值
选择器{
样式:样式值;
样式:样式值;
}
3css常用选择器
基本选择器
id选择器 通过id属性值找元素
class选择器 通过class属性值找元素
标签选择器 通过标签名找元素
选择器优先级
id > class > 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
基本选择器
1.标签选择器 标签名 选取范围大 不够精准
2.class选择器(*) .样式值 选取精准
3.id选择器 #id值 选取精准
选择器优先级
id > class > 标签
-->
<style>
/* p{
color: red;
} */
.mycls1{
color: red;
}
.mycls2{
font-size: xx-large;
}
#myp{
color: green;
}
#testp{
color: brown;
}
p{
color: blueviolet;
}
.testcls{
color: aquamarine;
}
</style>
<!--
class 值允许多值 多样式叠加
id 给元素起唯一标记 不要重复
-->
</head>
<body>
<h1>长寿秘诀---看妞老头</h1>
<p class="mycls2">要想健康又长寿</p>
<p class="mycls1">抽烟喝酒吃肥肉</p>
<p class="mycls1 mycls2">晚睡晚起不锻炼</p>
<p id="myp">常与异性交朋友</p>
<hr>
<p id="testp" class="testcls">随便一个P标签</p>
</body>
</html>
其他选择器
4并集选择器 选择器,选择器 合并选取范围 扩大范围
5交集选择器 选择器选择器 需要符合多个条件 缩小范围
6后代选择器 选择器 选择器 选取符合层次结构的元素 可以跨代
7子代选择器 选择器>选择器 选取符合层次结构的元素 只有子代
8属性选择器 [属性][属性=属性值] input[type='button'] 通常用在表单元素 与交集选择器一起用
9全局选择器 * 做全局默认设置使用
样式覆盖 要综合看特定性权值特征 叠加
( 0 , 1 , 2)
id > class > 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
基本选择器
1.标签选择器 标签名 选取范围大 不够精准
2.class选择器(*) .样式值 选取精准
3.id选择器 #id值 选取精准
选择器优先级
id > class > 标签
4并集选择器 选择器,选择器 合并选取范围 扩大范围
5交集选择器 选择器选择器 需要符合多个条件 缩小范围
6后代选择器 选择器 选择器 选取符合层次结构的元素 可以跨代
7子代选择器 选择器>选择器 选取符合层次结构的元素 只有子代
8属性选择器 [属性][属性=属性值] input[type='button'] 通常用在表单元素 与交集选择器一起用
9全局选择器 * 做全局默认设置使用
样式覆盖 要综合看特定性权值特征 叠加
( 0 , 1 , 2)
id > class > 标签
-->
<style>
/* .testp,h1{
color: red;
} */
/* p.testp{
color: red;
} */
/* .mydiv p{
color: red;
} */
.mydiv>div>p{
color: red;
}
input[type='button']{
color: red;
}
*{
color: blue;
}
</style>
<!--
class 值允许多值 多样式叠加
id 给元素起唯一标记 不要重复
-->
</head>
<body>
<h1 class="testp">长寿秘诀---看妞老头</h1>
<div class="mydiv">
<p>要想健康又长寿</p>
<p>抽烟喝酒吃肥肉</p>
<div>
<p>晚睡晚起不锻炼</p>
<p>常与异性交朋友</p>
</div>
</div>
<hr>
<p class="testp">随便一个P标签</p>
<div>
<p>要想健康又长寿</p>
<p>抽烟喝酒吃肥肉</p>
<p>晚睡晚起不锻炼</p>
<p>常与异性交朋友</p>
</div>
<input type="text" value="文本框">
<input type="button" value="按钮">
<input type="text" value="文本框">
<input type="button" value="按钮">
<input type="text" value="文本框">
<input type="button" value="按钮">
<input type="text" value="文本框">
<input type="button" value="按钮">
</body>
</html>
4css常用样式
1文字修饰
color 颜色
颜色英文
rgb值 光学成像三原色 红 绿 蓝 0 - 255
16进制rgb #FF0000 简写 #F00 0-FF
font-size px 像素
分辨率 1080p 2k 4k
1920*1080
3840*2160
font-weight 字体加粗
font-family 默认黑体 '隶书'
text-decoration 修饰线 删除线 下划线 没有线
text-align 文字对齐
2位置调整
line-height 行间距 单行内容居中 可以让行间距与块高保持一致
width 宽度
height 高度
单位 像素
比例 (高度比例需要父元素高度已指定)
vw vh 视窗比例
vertical-align 图片与文字对齐方式 底部 中部 顶部
3列表图片 背景和图片
list-style 无序列表样式
background-color 背景颜色
background-image 背景图片 需要引入图片
background-repeat 背景图片重复方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
color 颜色
颜色英文
rgb值 光学成像三原色 红 绿 蓝 0 - 255
16进制rgb #FF0000 简写 #F00 0-FF
font-size px 像素
分辨率 1080p 2k 4k
1920*1080
3840*2160
font-weight 字体加粗
font-family 默认黑体 '隶书'
text-decoration 修饰线 删除线 下划线 没有线
text-align 文字对齐
line-height 行间距 单行内容居中 可以让行间距与块高保持一致
width 宽度
height 高度
单位 像素
比例 (高度比例需要父元素高度已指定)
vw vh 视窗比例
vertical-align 图片与文字对齐方式 底部 中部 顶部
list-style 无序列表样式
background-color 背景颜色
background-image 背景图片 需要引入图片
background-repeat 背景图片重复方式
*/
p{
color:rgb(100, 9, 9);
font-size: 50px;
font-weight: 900;
font-family: '隶书';
text-decoration: underline;
text-align: center;
width: 30vw;
height: 50vh;
line-height: 300px;
background-color: rgb(204, 111, 111);
background-image: url(./imgs/image.png);
background-repeat: repeat-y;
}
/* .mydiv{
height: 1000px
} */
a{
text-decoration:none;
}
.myimg{
vertical-align: top;
}
.myul{
list-style: url(./imgs/image.png);
}
</style>
</head>
<body>
<div class="mydiv">
<p>我每天都要心情愉悦</p>
</div>
<a href="###">aaaa</a>
<hr>
<img class="myimg" src="./imgs/image.png">1111111
<ul class="myul">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
</ul>
</body>
</html>
开发岗位
UI设计师 画图 切图 做平面设计 ps html css
前端工程师 ps 切图 html css javascript
后端工程师 java做服务器 数据处理 数据存储
javascript html css 套UI库
初创公司 老板 你
4盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 块从上到下
内容大小 宽高
边框 border
内部填充 padding
外边距 margin
方向可以单独设置 top left bottom right
边框圆角 四个角可以单独设置 可以设置圆弧程度
margin:20px auto 特殊值 让块元素居中
*/
.mydiv{
width: 200px;
height: 200px;
border-bottom: 10px solid black;
border-right: 10px solid black;
border-bottom-right-radius: 50%;
/* padding-left: 20px; */
padding:20px 30px 40px 50px;
/* margin-left: 40px; */
margin:20px auto;
}
.testdiv{
width: 500px;
height: 500px;
border: 1px solid black;
}
.innerDiv{
width: 150px;
height: 98px;
margin-left: 10px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div class="mydiv"></div>
<div class="mydiv">11111</div>
<h1>标题</h1>
<ul>
<li>1111</li>
<li>1111</li>
</ul>
<hr>
<div class="testdiv">
<div class="innerDiv"></div>
<div class="innerDiv"></div>
<div class="innerDiv"></div>
<!--
<div class="innerDiv"></div>
<div class="innerDiv"></div> -->
</div>
</body>
</html>
5显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline;
opacity: 0.5;
}
span{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
background-color: rgba(94, 202, 61, 0.623);
}
/*
display block 块
inline 行内
inline-block 行内块
none 不显示
opacity 透明度
颜色中rgba 的a 也是调整透明度
*/
</style>
</head>
<body>
<!--
默认文档流
block 块 从上到下 宽高有效
inline 行内 从左到右 宽高无效
inline-block 行内块 从左到右 宽高有效
none 不显示
opacity 颜色中rgba 的a 也是调整透明度
-->
<div>div</div>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
<span>span</span>
</body>
</html>
6.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:active 鼠标单击
:hover 鼠标悬停(放在了指定的元素上)
cursor: pointer; 手型光标
*/
.mydiv{
width: 100px;
height: 100px;
border: 1px solid black;
}
.mydiv:active{
background-color: lightcoral;
}
.mydiv:hover{
background-color: rgb(42, 212, 93);
cursor: pointer;
}
</style>
</head>
<body>
<div class="mydiv">mydiv</div>
<a href="###">mydiv</a>
</body>
</html>
7定位属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
relative 相对定位
元素不脱离文档流 以原始位置开始偏移
absolute 绝对定位
元素脱离文档流 以页面位置进行偏移
fixed 固定定位
元素脱离文档流 以页面位置进行偏移 并固定在此处
z-index
*/
.div1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightcoral;
position: fixed;
top: 10px;
left: 10px;
z-index: 1;
}
.div2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: rgba(216, 240, 129, 0.486);
position: fixed;
top: 30px;
left: 30px;
z-index: 2;
}
.div3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: rgb(9, 7, 161);
position: fixed;
top: 50px;
left: 50px;
z-index: 3;
}
</style>
</head>
<body>
<div class="div1" >div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
浙公网安备 33010602011771号