02CSS
1.简介
从事网页制作或者相关工作,就要学习HTML,CSS。其中HTML是网页制作的主要语言网页的基础,CSS层叠样式表,主要用来修饰页面的元素
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
简单来说:
HTML称之为页面的结构,CSS称之为页面的表现
2.css的使用方式
2.1行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:24px;color: orangered">超链接</a>
2.2内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
</head>
<body>
<a href="xxxx">超链接</a>
</body>
</html>
2.3外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
a {
font-size: 24px;
color: #0F0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title> <link href="01.css" rel="stylesheet"/>
</head>
<body>
<a href="xxxx">超链接</a>
</body>
</html>
3.选择器
3.1标签选择器
作用： 选择同名的标签
<style type="text/css">
/*标签选择器*/
div {
font-size: 24px;
color: #F00;
}
</style>
<body>
<div>div1css选择器</div>
<div>div2css选择器</div>
<div>div3css选择器</div>
</body>
3.2类选择器
作用： 选择同类的标签
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
<style type="text/css">
/*类选择器*/
.c1{
font-size:36px;
color:#00F;
}
</style>
<body>
<div class="c1">div1css选择器</div>
<div>div2css选择器</div>
<div class="c1">div3css选择器</div>
</body>
3.3id选择器
作用： 选择一个标签
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！
<style type="text/css">
/*id选择器*/
#d1 {
font-size: 28px;
color: #0F0;
}
</style>
<body>
<div class="c1">div1css选择器</div>
<div>div2css选择器</div>
<div class="c1">div3css选择器</div>
<div id="d1">div4css选择器</div>
</body>
3.4并集选择器
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
<style type="text/css">
/*并集选择器*/
.c1, #d1 {
font-size: 24px;
color: #0F0;
}
</style>
<body>
<div class="c1">div1css选择器</div>
<div>div2css选择器</div>
<div class="c1">div3css选择器</div>
<div id="d1">div4css选择器</div>
<!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签，
后面使用javascript代码选择标签的时候，getElementById("id属性值") --> </body>
3.5交集选择器
作用： 选择某个选择器中的子标签。
<style type="text/css">
/*交集选择器
div里面的span标签
*/
div span {
font-size: 30px;
color: orange;
}
</style>
<div class="c1">div1css选择器<span>span内部的内容</span></div>
<div>div2css选择器</div>
<div class="c1">div3css选择器</div>
<div id="d1">div4css选择器</div>
<!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签，
后面使用javascript代码选择标签的时候，getElementById("id属性值") -->
<span>span的外部内容</span>
3.6通用选择器
作用： 选择所有的标签
<style type="text/css">
/*通用选择器*/
*{
font-size:24px;
color: olive;
}
</style>
<body>
<div class="c1">div1css选择器<span>span内部的内容</span></div>
<div>div2css选择器</div>
<div class="c1">div3css选择器</div>
<div id="d1">div4css选择器</div>
<!-- 注意：在同一个html页面中，建议不要出现两个同名的id属性的标签，
后面使用javascript代码选择标签的时候，getElementById("id属性值") -->
<span>span的外部内容</span>
</body>
4.常用属性
4.1列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css列表</title>
<style type="text/css">
ul{
/*列表符号类型*/
/*list-style-type:none;*/
/*设置列表符号的图片*/
list-style-image:url(../picture/start.jpg);
}
</style>
</head>
<body>
<ul>
<li>学生管理</li>
<li>教师管理</li>
<li>课程管理</li>
</ul>
</body>
</html>
4.2表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse ;
border-color: red;
border-width: 2px;
}
td{
border-width: 3px;
}
</style>
</head>
<body>
<h3 align="center">学生信息列表</h3>
<table border="1" align="center" width="500px" height="300px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>计算机1班</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>计算机1班</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>计算机1班</td>
</tr>
<tr>
<td>陈六</td>
<td>20</td>
<td>计算机1班</td>
</tr>
</table>
</body>
</html>
5.盒子模型
5.1基本概念
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离
5.2模拟QQ登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟QQ登录页面</title>
<style type="text/css">
/*修饰主div*/
#main {
/*宽度和高度*/
width: 450px;
height: 300px;
/*边框*/
border: 1px solid #000;
/*设置外边距*/
/*简写属性*/
margin: 150px 0 0 420px; /*设置背景图片*/
background-image: url(../picture/qq.jpg);
background-repeat: no-repeat;
background-position: top center;
} /*用户名div*/
#userName {
/*设置外边距*/
margin: 60px 0 0 100px;
} /*密码div*/
#userPwd {
/*设置外边距*/
margin: 20px 0 0 100px;
} /*按钮div*/
#btn {
/*设置外边距*/
margin: 20px 0 0 150px;
} /*注册按钮*/
#regBtn {
margin-left: 30px;
} /*设置用户输入框的背景*/
#nameInput {
background-image: url(../picture/head.png);
background-repeat: no-repeat;
/*设置左内边距*/
padding-left: 30px;
} /*设置密码输入框的背景*/
#pwdInput {
background-image: url(../picture/key.jpg);
background-repeat: no-repeat;
/*设置左内边距*/
padding-left: 30px;
}
</style>
</head>
<body>
<div id = "main">
<form>
<div id="userName">
用户名：<input id="nameInput" type="text" name="userName">
</div>
<div id="userPwd">
密 码：<input id="pwdInput" type="password" name="userPwd">
</div>
<div id="btn">
<input type="submit" value="登录"/><input type="button" value="立即注册" id="regBtn"/>
</div>
</form>
</div>
</body>
</html>
6.css定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
02CSS的更多相关文章
- day 42 02--CSS的继承性和层叠性
02--CSS的继承性和层叠性 本节目录 一 继承性 二 层叠性 三 层叠性权重相同处理 一 继承性 css有两大特性:继承性和层叠性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点 ...
- 面试 02-CSS盒模型及BFC
02-CSS盒模型及BFC #题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.marg ...
- css 02-CSS属性：背景属性
02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...
- css进阶 02-CSS布局
02-CSS布局 #前言 #常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行) ...
- 02---CSS整理
一.概述 CSS(cascading style sheet) 层叠样式表 提供比HTML更强大的页面排版.美化工具 CSS将网页内容和显示样式进行分离,提高了显示 ...
- 集腋成裘-02-css基础-01
CSS 层叠样式表(Cascading Style Sheets)(级联样式表) 1 选择器 1.1 写法 选择器是一个选择标签的过程. 选择器{属性:值;...} 1.2 基础选择器 标签选择器 类 ...
- 02-CSS&JS
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: - 了解CSS的概念 - 了解CSS的引入方式 - 了解CS ...
- 02--css背景与边框--css揭秘
背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...
- 02-css的选择器
css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是 ...
- 02--CSS的继承性和层叠性
一 继承性 css有两大特性:继承性和层叠性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的 ...
随机推荐
- 通过构造器配置Bean
public class Role { private Log id; private String roleName; private String note; public Role(String ...
- Mybatis 自动生成mapper文件
在pom.xml下的<build>内加入: <build> <plugins> <plugin> <groupId>org.mybatis. ...
- Spring4配置文件模板
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- ASP.NET中调用百度地图API
1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...
- 将Microsoft SQL Server 2000数据库转换成MySQL数据库
1. 下载并安装MyODBC.(如果是XP请下载5.3的旧版本,8.x的新版本运行有问题) 2. 创建一个空的MySQL数据库. 3. 在Windows >> 控制面板 >> ...
- 远程桌面 使用 本地输入法（虚拟化 终端 远程接入 RemoteApp）
远程桌面连接组件是微软从Windows 2000 Server开始提供的,该组件一经推出便受到了很多用户的拥护和使用. 在WINDOWS XP和WINDOWS SERVER 2003中微软公司将该 ...
- 【ABAP系列】SAP ABAP 关于四舍五入算法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 关于四舍五入算 ...
- 【Qt开发】QT中显示图像数据
一般图像数据都是以RGBRGBRGB--字节流的方式(解码完成后的原始图像流),我说成字节流,那就表明R,G,B的值各占一个字节,在编程时表示的就是unsigned char * data. 我们先来 ...
- python+selenium切换窗口（获取句柄信息）
current_window_handle:获得当前窗口句柄: window_handles:返回所有窗口的句柄到当前会话: switch_to.window(suoyou[0]) ========= ...
- ESXi导出的CentOS7 ovf文件导入到workstation 无法打开GUI登录界面的问题解决方案
1. 前几天将centos的机器导出为ovf 文件 然后使用 workstation 引入之后发现总是黑屏 然后有一个 横杠在闪 2. 解决办法是 修改centos的虚拟机配置文件,将显示器修改为这样 ...