CSS
2019-08-14 本文已影响0人
飞扬code
CSS作用：
页面美化和布局控制
1、概念
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2、好处
1） 功能强大
2）将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率
3、CSS的使用
CSS与html结合方式
1）内联样式
在标签内使用style属性指定css代码
如：
<div style="color:red;">hello css</div>
2）内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello css</div>
<div>hello css</div>
</body>
</html>
3）外部样式
定义css资源文件。
在head标签内，定义link标签，引入外部的资源文件
如
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>hello css</div>
<div>hello css</div>
<p>呵呵</p>
</body>
</html>
css文件：
div{
color:green;
}
p{
color: red;
font-size: 30px
}
注意：
1、1）,2）,3）种方式 css作用范围越来越大
2、1）方式不常用，后期常用2）,3）
3、3）的格式可以写为：
<style>
@import "css/a.css";
</style>
4、CSS语法
格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素。
注意： 每一对属性需要使用；隔开，最后一对属性可以不加；
5、选择器
筛选具有相似特征的元素
分类：
1. 基础选择器
1） id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
语法：#id属性值{}
2）元素选择器：选择具有相同标签名称的元素
语法： 标签名称{}
注意：id选择器优先级高于元素选择器
3）类选择器：选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器选择器优先级高于元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
.cls1{
color: blue;
}
div{
color:green;
}
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">初级工程师</div>
<div class="cls1">高级程序员</div>
<p class="cls1">架构工程师</p>
</body>
</html>
image.png
2. 扩展选择器：
1）选择所有元素：
语法：
*{}
2）并集选择器：
语法：
选择器1,选择器2{}
3）子选择器：
筛选选择器1元素下的选择器2元素
语法：
选择器1 选择器2{}
4）父选择器：
筛选选择器2的父元素选择器1
语法：
选择器1 > 选择器2{}
5）属性选择器：
选择元素名称，属性名=属性值的元素
语法：
元素名称[属性名="属性值"]{}
6）伪类选择器：
选择一些元素具有的状态
语法：
元素:状态{}
如： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color:red;
}
div > p {
border: 1px solid;
}
input[type='text']{
border: 5px solid;
}
a:link{
color: pink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div>
<p>架构工程师</p>
</div>
<p>高级程序员</p>
<div>aaa</div>
<input type="text" >
<input type="password" >
<br> <br> <br>
<a href="#">高级程序员</a>
</body>
</html>
image.png
6、 常用的CSS属性和值
1）CSS文本
<title>css文本</title>
<style type="text/css">
body {
/*color：颜色*/
color: #F00;
/*字符间距*/
letter-spacing: 10px;
/*对齐方式*/
text-align: center;
/*文本修饰 下划线-underline， 中划线(line-through) 上划线-overline 没有:none*/
text-decoration: line-through;
/*单词间距*/
word-spacing: 30px;
}
</style>
</head>
<body>
今天 天气 不错！
</body>
</html>
image.png
2）CSS字体
<title>css字体</title>
<style type="text/css">
body {
/*字体类型
注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
*/
font-family:"宋体";
/*字体大小*/
font-size:24px;
/*字体样式: 正(normal默认) 斜(italic)*/
font-style:italic;
/*字体粗细 bold 加粗*/
font-weight:bold;
/* font: 简写属性 */
/*font: italic bold 36px "黑体"; */
}
</style>
</head>
<body>
哈哈
</body>
</html>
image.png
3）css背景
image.png
<title>css背景</title>
<style type="text/css">
body {
/*背景颜色*/
background-color:#0CF;
/*背景图片*/
background-image:url(img/mm.jpg);
/*设置背景图片是否重复，或如何重复
no-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
*/
background-repeat:no-repeat;
/*设置背景的起始位置*/
background-position:top center;
/*简写属性*/
/* background: #3FF url(img/mm.jpg) no-repeat top center; */
}
</style>
</head>
<body>
</body>
</html>
image.png
4）css列表
<title>css列表</title>
<style type="text/css">
ul {
/*列表符号类型*/
list-style-type: none;
/*设置列表符号的图片*/
list-style-image: url(img/start.jpg);
}
</style>
</head>
<body>
系统菜单
<ul>
<li>学生管理</li>
<li>教师管理</li>
<li>课程管理</li>
</ul>
</body>
</html>
image.png
5） css表格
<title>css表格</title>
<style type="text/css">
table {
/*合并表格的边框*/
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1px" width="400px" height="200px" align="center">
<caption>2019年期末考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>狗娃</td>
<td>计算机1班</td>
<td>80</td>
</tr>
<tr>
<td>狗剩</td>
<td>计算机2班</td>
<td>78</td>
</tr>
<tr>
<td>狗蛋</td>
<td>软件1班</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
image.png
6） css边框
<title>css边框</title>
<style type="text/css">
div {
/*边框颜色*/
/*简写属性
1) 默认设置方向属性： 上 右 下 左
2）如果当前方向没有设置颜色，那么取对面的颜色
border-color:#F00 #00F #0F0 #C60;
*/
/*
border-color:#F00;
*/
/*
border-left-color:#F00;
border-right-color:#0F0;
border-top-color:#00F;
border-bottom-color:#C90;
*/
/*边框宽度*/
/*简写属性
border-width:10px 20px 30px 40px；
*/
/*
border-width:10px;
*/
/*
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
*/
/*边框样式(注意： 边框只有加了border-style才会显示出来)
solid: 单实线
dashed:虚线
dotted: 点
double: 双实线
*/
/*简写属性*/
/*
border-style:solid;
*/
/*
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
*/
/*所有边框属性的简写属性*/
border: 2px solid #F00;
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>
image.png
7、盒子模型
可以将html页面上每一个标签看做一个盒子
盒子相关的属性：
宽度和高度（width和height）：决定这个盒子的容量
内边距（padding）：盒子边距与内容的距离
外边距（margin）：盒子与盒子之间的距离
box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
left
right
image.png
<title>盒子模型</title>
<style type="text/css">
div {
/*宽度和高度*/
width: 100px;
height: 100px;
/*设置边框*/
border: 3px solid #000;
/*设置内边距*/
/*左内边距*/
padding-left: 10px;
/*上内边距*/
padding-top: 20px;
}
#div1 {
/*下外边距*/
/*margin-bottom:10px;*/
}
#div2 {
/*上外边距*/
margin-top: 10px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
image.png
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<div class="div3">aaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">cccc</div>
</body>
</html>
image.png
8、CSS定位
image.png
<title>css定位</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: 3px solid #000;
}
#div1 {
background-color: #F00;
}
#div2 {
background-color: #00F;
}
#div3 {
background-color: #0F0;
/*相对定位*/
/*
position:relative;
left:10px;
top:10px;
*/
/*绝对定位*/
position: absolute;
left: 20px;
top: 20px;
}
#adv1 {
width: 300px;
height: 300px;
border: 3px solid #00F;
background-color: #09F;
/*绝对定位*/
/*position:absolute;*/
/*固定定位*/
position: fixed;
left: 450px;
top: 200px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="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 />
<div id="adv1">立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询立刻咨询</div>
</body>
</html>
image.png
9、框架结构布局div
用来给界面划分区域
div默认是从上之下排列
通过浮动设置框架式布局结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#top {
width: 100%;
height: 150px;
background-color: green;
/*margin-left: 10px 设置边距*/
}
body {
/*无距离*/
margin: 0px;
}
#bottom {
width: 100%;
height: 800px;
}
#left {
width: 20%;
height: 700px;
background-color: blue;
float: left;
}
#content {
width: 80%； height: 700px； background-color: pink;
float: left;
}
</style>
</head>
<body>
<div id="top">fdsfg</div>
<div id="bottom">
<div id="left">gdfsg</div>
<div id="content">gdfsg</div>
</div>
</body>
</html>
image.png
