css的概念和声明学习:
问题:
HTML是将网页信息按照有效的组织形式展现给用户.但是如果使用HTML进行网页样式的修饰的话,会特别的麻烦.
代码也会出现很大的冗余,比如表格的修饰.
解决:
使用CSS
使用:
概念:
层叠样式表(单)
特点:
css基于HTML文档进行样式修饰.
css提供了方便的选择器以及大量的样式单
css可以一处声明多处使用.
css的声明:
内联方式:
在head标签中使用style属性声明css代码域
<head>
.....
<style>
/*css代码域*/
</style>
......
</head>
内嵌方式:
在标签上直接使用style属性声明
<div id="" style=""></div>
外联方式:
在外部声明css文件.,然后在head标签中使用link标签引入
<head>
.....
<link rel="stylesheet" type="text/css" href="相对路径"/>
......
</head>
注意:
当三种声明方式操作了同一个标签的同一个样式时,按照就近原则显示
实现代码：
<html>
<head>
<title>css代码域声明学习</title>
<meta charset="UTF-8"/>
<!--使用style标签声明css代码域-->
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<style type="text/css">
#p1{
color: red;
background-color: gray;
width: 300px;
height: 100px;
font-weight: bold;
}
#p3{
color: brown;
background-color: aqua;
width: 300px;
height: 130px;
font-weight: bold;
}
</style>
<!--使用link标签调用外部的css文件-->
</head>
<body>
<h3>css代码域声明学习</h3>
<hr />
<p id="p1">
内联方式:<br />
今天天气真好,适合学习.学习CSS,也别简单,特别爽.css是给<br />
网页进行化妆的语言.
</p>
<p style="color:blueviolet;background-color: chocolate;width: 300px;height: 100px; font-weight: bold;">
内嵌方式:<br />
今天天气真好,适合学习.学习CSS,也别简单,特别爽.css是给<br />
网页进行化妆的语言.
</p>
<p id="p2">
外联方式:<br />
今天天气真好,适合学习.学习CSS,也别简单,特别爽.css是给<br />
网页进行化妆的语言.
</p>
<hr/>
<p id="p3" >
三种声明方式操作了同一个标签同一个样式怎么办?<br />
内联和外联声明方式如果在head中声明,则遵循就近原则.谁<br />
距离标签近最终分显示谁的样式.
</p>
</body>
</html>
<!--
css代码域声明学习
内联方式:
在head标签中使用style标签声明css代码域
注意:
其实可以声明在html文档的任意位置,但是为了提升代码的阅读性,一般声明在head标签中
内嵌方式:
在HTML标签上使用style属性即可
外联方式:
在外部声明css文件,然后在head标签中使用link标签引入css文件
注意:
一般来说外联方式声明公共css样式单,内联和内嵌方式为某个HTML文件的个性化css设置.
问题:
当三种css代码声明方式操作了同一个标签的同一个样式怎么办?
解决:
内联和外联声明方式在head标签,则遵循就近原则.
-->
css的选择器
实现代码：
<html>
<head>
<title>css的选择器学习</title>
<meta charset="UTF-8"/>
<!--
css选择器的作用:
选择要添加样式的HTML标签
css的选择器学习(基础选择器):
全部选择器:
*{样式名:样式值;样式名:样式值;....}
作用:选择HTML文档的全部标签,主要是用来设置网页的基础样式.
id选择器:给指定的标签添加指定的样式(个性化设置)
#id名{样式名:样式值;样式名:样式值;....}
作用:
针对性的选择一个HTML标签,然后给该标签添加样式.
标签选择器:想用的标签使用了相同的样式
标签名{样式名:样式值;样式名:样式值;....}
作用:
给某一类标签添加基础样式
类选择器:不同的标签使用相同的样式
.类选择器名{样式名:样式值;样式名:样式值;....}
作用:
给不同的标签添加想用的基础样式.
---------
组合选择器:
使用基础选择器进行组合,例如
id选择器,标签选择器,类选择器{样式名:样式值;样式名:样式值;....}
子选择器:
使用此选择器可以针对的给某类或者某个标签的某个或者某类子标签添加样式
基础选择器 基础选择器 基础选择器...{样式名:样式值;样式名:样式值;....}
属性选择器:
使用此选择器可以选择某类标签中的某些指定标签
标签名[属性]{样式名:样式值;样式名:样式值;....} 具备某个属性的标签
标签名[属性=值]{样式名:样式值;样式名:样式值;....} 具备某个属性并值为确定值的标签
--------
伪类:css对外提供的可以方便的操作样式的函数.
作用:可以实现根据用户在网页上的操作动态的添加样式.
例子:
hover 悬停伪类
-->
<!--声明css代码域-->
<style type="text/css">
/*全部选择器*/
*{
font-size: 15px;
font-family: 宋体;
}
/*ID选择器*/
#p1{
color: #FFD700;
font-size: 20px;
}
/*标签选择器*/
p{
background-color: green;
width: 280px;
height: 150px;
}
/*类选择器：*/
.common{
border: solid 1px;
background-color: green;
width: 280px;
height: 150px;
}
/*---------------------------------------------------------------*/
/*组合选择器*/
#p2,#div02{
background-color: coral;
color: #FFD700;
width: 280px;
height: 100px;
}
/*子选择器*/
div b{
color: red;
}
/*属性选择器*/
input[type=text]{
color:red;
}
/*--------------------------------------------------------------*/
a:hover{
color: red;
}
</style>
</head>
<body>
<h3>css的选择器学习</h3>
<hr />
<h4>ID选择器和标签选择器和类选择器学习:</h4>
<p id="p1">
css的选择器学习:<br />
css的选择器是用来选择添加样式的HTML标签的.使用<br />
起来特别方便,记忆起来特别简单.
</p>
<p class="common">
css的标签选择器学习:<br />
css的标签选择是用来给某一类标签添加公共样式的.<br />
相对ID选择器来说,标签选择器在一定程度上可以<br />
降低css样式代码的冗余
</p>
<div class="common">
类选择器学习:<br />
不同的标签可能会使用相同的的样式,这样就需要使用/<br />
类选择器进行样式的添加,避免代码的冗余.
</div>
<hr />
<h4>其他选择器学习:</h4>
<p id="p2">
组合选择器学习:<br />
组合选择器是对其他选择器做的进一步的补充,可以<br />
让我们更加灵活的获取HTML标签
</p>
<div id="div02">
组合选择器学习:<br />
组合选择器是对其他选择器做的进一步的补充,可以<br />
让我们更加灵活的获取HTML标签
</div>
<div id="div03"style="background-color: #FFD700;width: 280px;height: 100px;">
子选择器学习:<br />
选择某个标签下的子标签.<br />
<b>哈哈,子选择器学习</b>
</div>
<br /><br />
<b>哈哈,子选择器学习</b>
<br /><br />
<div id="div04" style="background-color: #FFD700;width: 280px;height: 150px;">
属性选择器:<br />
选择具备某些指定属性或者属性值的标签<br />
用户名:<input type="text" name="uname" value="张三"/><br />
邮箱:<input type="text" name="uname" value="123123@qq.com"/><br />
密码: <input type="password" name="upwd" value="123"/>
</div>
<hr />
<a href="http://www.w3school.com.cn/css/css_pseudo_classes.asp" target="_blank">伪类学习</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>CSS样式的属性
实现代码：
<html>
<head>
<title>css的常用属性学习</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href=""/>
<!--
css的常用属性学习:
边框属性:
border: solid 1px blueviolet;
border-bottom(top/left/right): solid 3px darkblue; 可以对边框的上下左右进行单独设置,如不需要某个边,值为none即可
border-top: solid 3px darkblue; 可以对边框的上下左右进行单独设置,如不需要某个边,值为none即可
border-left: solid 3px darkblue; 可以对边框的上下左右进行单独设置,如不需要某个边,值为none即可
border-right: solid 3px darkblue; 可以对边框的上下左右进行单独设置,如不需要某个边,值为none即可
宽高设置:
width:100px;
height:200px;
背景颜色设置:
background-color: orange;
背景图片:
background-image: url(image/1.jpg);/*添加背景图片*/
background-size: 100%;/*设置图片大小*/
background-repeat: no-repeat;/*设置图片不平铺*/
设置文本位置:
text-align: center;
设置字体样式:
font-weight: bold; 设置字体加粗
font-size: 15px;/*设置字体大小*/
color: blue;/*字体颜色*/
font-family:"仿宋";/*设置字体样式*/
其他常用样式:
list-style-type: none;/*去除li标签签的标识符*/
text-decoration: none;/*去除a标签的下划线*/
float: right;/*设置浮动*/ 将块级元素变为行内元素
-->
<!--声明css代码域-->
<style type="text/css">
/*设置表格样式*/
table{
border: solid 1px blueviolet;/*增加表框*/
border-bottom: solid 3px darkblue;/*设置下边框*/
border-radius:10px ;/*设置边框的弧度*/
background-image: url(image/1.jpg);/*添加背景图片*/
background-size: 100%;/*设置图片大小*/
background-repeat: no-repeat;/*设置图片不平铺*/
}
/*设置行样式*/
tr{
height: 40px;
}
/*设置单元格样式*/
td{
border: solid 1px darkgreen;
border-radius:10px ;/*设置边框的弧度*/
width: 150px;
}
/*设置第一行单元格的背景色*/
#t1 td{
background-color: orange;/*设置背景颜色*/
text-align: center;/*设置文本居中*/
font-weight: bold;/*设置字体加粗*/
font-size: 20px;/*设置字体大小*/
color: blue;/*字体颜色*/
font-family:"仿宋";/*设置字体样式*/
}
/*------------------------------------------------------*/
/*设置Ul样式*/
#menu{
background-color: orange;
height: 50px;
}
/*设置li样式*/
#menu li{
list-style-type: none;/*去除li标签签的标识符*/
float: left;/*设置浮动*/
position: relative;
top: 14px;
}
/*设置超链接样式*/
#menu li a{
text-decoration: none;/*去除a标签的下划线*/
margin-left: 20px;
font-weight: bold;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<h3>css的常用属性学习</h3>
<hr />
<table >
<tr id="t1">
<td>课程名</td>
<td>级别</td>
<td>分数</td>
<td>教师</td>
<td>备注</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr />
<div id="">
<ul id="menu">
<li><a href="">首页</a></li>
<li><a href="">java学院</a></li>
<li><a href="">python学院</a></li>
<li><a href="">大数据学院</a></li>
<li><a href="">人工智能学院</a></li>
</ul>
</div>
</body>
</html>
CSS的定位和盒子模型
实现代码：
<html>
<head>
<title>css的定位和盒子模型</title>
<meta charset="UTF-8"/>
<!--
div标签学习:
特点:
默认是没有边框的
默认宽度是满屏宽度
默认高度随内容的大小而改变
单独占据一行(块级元素)
作用:
主要是用来进行网页布局的.
解释:将页面内容填写在div中,这样div在页面中的位置即是其中网页数据的显示位置
css的定位:
作用:主要是用来做网页布局的.
定位解释:
因为物体或者元素的移动需要参照物,这个参照物可以是自己也可以是别的事物.
参数物为别的事物: 绝对定位
参照物是自己: 相对定位
定位学习:
绝对定位:
参照物:参照的是最邻近的使用了定位的父级标签,如果没有使用定位的父级标签则参照body
使用:
在要移动的标签中使用css属性:
position: absolute;/*设置定位为绝对定位*/
top:200px;/*设置距离参照物的y距离*/
left:200px;/*设置距离参照物的x距离*/
相对定位:
参照物:参照物是自己当前位置.
注意:
css+div布局可以实现一张网页的内容布局.
frameset是将不同的网页在一个页面中显示.
css的盒子模型:
作用:用来对数据进行排版.
使用:
外边距:
margin:5px;上下左右都是5px
margin-top:5px;设置上外边距
margin-left:5px;设置左外边距
margin-right:5px;设置右外边距
margin-bottom:5px;设置下外边距
边框:
border
内边距
padding
内容区域
影响内区域大小的为宽高设置
-->
<!--
css页面开发流程:
1 声明css文件
2使用css+div+定位进行网页布局
3 使用盒子模型+css样式设置填充的网页数据的样式
-->
<!--声明css代码域-->
<style type="text/css">
/*设置主体的盒子模型*/
*{margin: 0px;padding: 0px;}
/*设置头部样式*/
#head{
border: solid 1px;
background-color: orange;
height: 150px;
margin-bottom: 20px;
}
/*设置头部图片div样式*/
#head_img{
border: solid 1px;
background-color: darkgrey;
width: 300px;
height: 100px;
/*使用定位*/
position: relative;
top:20px;
left:200px;
}
img{
/*盒子模型*/
/*设置外边距*/
margin: 5px;
margin-top: 10px;
/*设置边框*/
border: solid 1px;
/*设置内边距*/
padding: 5px;
background-color: white;
}
/*设置main样式*/
#main{
border: solid 1px;
background-color: darkgoldenrod;
height: 800px;
position: relative;
margin-bottom: 20px;
}
/*设置top样式*/
#top{
border: solid 1px;
background-color: darkcyan ;
width: 200px;
height: 200px;
position: absolute;/*设置定位为绝对定位*/
top:200px;
left:200px;
z-index: 100;/*设置显示级别*/
}
/*设置bottom的样式*/
#bottom{
border: solid 1px;
background-color: darkviolet ;
width: 200px;
height: 200px;
position: relative;/*设置定位为相对定位*/
left: 300px;
top:100px;
}
#footer{
border: solid 1px;
background-color: darkmagenta;
height: 100px;
}
</style>
</head>
<body>
<div id="head">
<div id="head_img">
<img src="image/2.jpg" width="100px"/>
<img src="image/2.jpg" width="100px"/>
</div>
</div>
<div id="main">
<div id="top">
我是主体的上部分:绝对定位
</div>
<div id="bottom">
我是主体的下部分:相对定位
</div>
</div>
<div id="footer">
我是底部
</div>
</body>
</html>小结：
css的概念和声明
css的选择器
css的常用样式
css的定位
css的盒子模型
css的案例:模拟12306主页
注意：
伪类要加冒号: a:hover{color=”red”;}
CSS代码的注释和Java相同
资料：
my.css:
#p2{
color: blue;
font-weight: bold;
width: 300px;
height: 100px;
background-color: gold;
}
#p3{
background-color: black;
}
img:
2543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
