Web前端笔记（三）
- CSS三种使用方式
1、元素内嵌样式表
<h1 style=” color:red; width:20px; ”> 内容 <h2>
2、文档内嵌样式
<head>里写
<style type=” text/css”>
h1{
color: red;
}
</style>
3、外部样式表
css文件夹里写
h1{
color: green;
}
<html>里写
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
- 三种使用方法
1、网站主页一般使用文档内嵌样式表
2、其余页面使用外部样式表
3、元素内嵌样式表一般不使用
优先级：就近原则 - 文档内嵌样式
- List item
标签选择器
<h1 style="color: blue;">你好</h1>
id选择器
<h2 id="hid">你好</h2>
#hid{
color: #FF0000;
}
类选择器
.a{
color: coral;
}
.b{
background-color: cadetblue;
}
<h3 class="a b">你好</h3>
组合选择器
ol li{
color: aqua;
} 给ol下的li标签设置样式
#ulid li{
color: #008000;
} 给id=ulid下的li标签设置样式
伪类选择器：给超链接设置样式
a:link 打开页面时超链接默认的样式
a:hover 当鼠标悬停到超链接上时设置的样式
a:visited 当超链接被点击后设置的样式
a:active 当鼠标点击超链接不释放时设置的样式
- 文本类CSS 属性
color：red; 设置文本颜色
text-align:center 设置文本对齐方向 替代html属性中的align
font-size: 14px; 设置文本大小，以px（像素）为单位
font-weight:bold或者数字 设置 文本粗细
font-family：'微软雅黑' ; 设置文本字体类型
font-style：italic; 设置字体的风格。比如倾斜、斜体
- DIV内css属性
width：300px; 设置 HTML元素的宽度
height：300px; 设置 HTML元素的高度
border：1px solid red 设置HTML元素的边框，包括大小，颜色和边框样式
background-color: #000; 设置HTML元素的背景颜色
background-image: url (“图片地址”); 设置HTML元素的 背景图像
line-height: 20px; 设置HTML元素的行高
text-decoration:none; 设置超链接的下划线的样式
margin： 0 auto; 设置HTML元素和其他周围HTML元素之间的距离
- DIV盒模型包括：
内容区
内边距
边框
外边距
快捷键
div．box1 +Tab
<div class=”box1”></div>
设置盒子内容区大小，使用width height属性来设置
width: 200px;
height: 200px;
background-color: #008000;
边框设置：边框宽、样式、颜色缺一不可
border-width：10px 20px 30px 40px 设置的顺序：上 右 下 左
border-width：10px 20px 30px 设置的取值：上 右 下 右
border-width：10px 20px 设置的取值：上 右 上 右
宽 border-width: 10px 20px 30px 40px;
颜色 border-color: #0000FF #00FFFF #5F9EA0 #FF0000;
样式 border-style: solid;
内边距会使用内容区的背景颜色
例：
利用div+css重构计算器页面
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box1{
width: 280px;
height: 350px;
background-color: lightblue;
margin: 0 auto;
border-radius: 20px;
}
#box2{
width: 90%;
height: 30px;
padding: 5px;
display: table-cell;
vertical-align:middle ;
margin: 0 auto;
}
.a{
width: 15px;
height: 15px;
margin-left: 10px;
float: left;
border-radius: 50%;
}
.bg-red{
background-color: red;
}
.bg-blue{
background-color: blue;
}
.bg-green{
background-color: green;
}
#box3{
width: 260px;
height: 30px;
background-color: white;
border: solid 2px orangered;
margin: 0 auto;
}
#box4{
width: 96%;
height: 265px;
margin: 5px auto;
}
#box4 div{
width: 24%;
height: 50px;
margin: 1px;
background-color: blanchedalmond;
float: left;
font-size:20px; /* 框内字体 */
line-height: 50px;
text-align: center;
}
</style>
<body >
<div id="box1">
<div id="box2">
<div class="a bg-red"></div>
<div class="a bg-blue"></div>
<div class="a bg-green"></div>
</div>
<div id="box3">
</div>
<div id="box4">
<div>AC</div>
<div>+/-</div>
<div>%</div>
<div>÷</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>*</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>-</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>+</div>
<div>0</div>
<div>保留</div>
<div>.</div>
<div>=</div>
</div>
</div>
</div>
</body>
</html>代码片
2707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
