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就是在设置属性的.不会牵扯到方法的 ...
随机推荐
- shell脚本之浮点数和整数计算
整数计算 直接使用放括号计算即可,省去*号需要使用转义符的麻烦 #!/bin/bash num1= num2= var1=$[ $num1 * $num2 ] echo "$var1&quo ...
- nginx利用try_files实现多个源
比如一个视频网站,视频资源分散在几台机器上,但是给用要提供统一的IP,路径,端口.就需要nginx,先检查本机是否有改文件,如果没有就代理其他地方 location / { root /data/ww ...
- Windows Server系统定时任务备份ORACLE数据库
Windows Server系统定时任务备份ORACLE数据库 一.编辑备份脚本 RMAN备份数据库 1.在备份脚本目录下,创建bat文件db_rman.bat set ORACLE_SID=orcl ...
- 配置 setting镜像在nexus私服上下载
在你的本地仓库上 setting文件中配置,一旦nexus服务关闭是无法下载的 1 配置nexus镜像 <mirror> <id>central1</id> < ...
- cmd 中文显示错误，解决办法
cmd窗口左上角控制按钮(就是图标)上单击-默认-选项-默认编码-936 追问 默认值是936的,但是属性里的当前代码页是437呀,怎么办 囧oz 追答 默认-选项-默认编码-936 不是属性,是 ...
- Delphi DbgridEh实现鼠标拖动选中列，并使复选框选中
1.先设置表格列的属性 procedure TForm_TaskToDW.InitGrid;var MyCol: TColumnEh;begin with DBGridEh_Task do be ...
- 使用app.config中的数据对数据库链接信息初始化
看到别人数据库信息都是在app.config里面设置的,今天来尝试了一下,报了 "System.Configuration.ConfigurationSettings.AppSettings ...
- Flask框架（三）—— 请求扩展、中间件、蓝图、session源码分析
Flask框架(三)—— 请求扩展.中间件.蓝图.session源码分析 目录 请求扩展.中间件.蓝图.session源码分析 一.请求扩展 1.before_request 2.after_requ ...
- 文档压缩 | gzip、bzip2、xz
6.文档的压缩与打包 Linux下常见后缀名所对应的的压缩工具 .gz 表示由gzip压缩工具压缩的文件 .bz2 表示由bzip2压缩工具压缩的文件 .tar 表示由tar打包程序打包的文件(tar ...
- 【模板】最长上升子序列(LIS)及其优化 & 洛谷 AT2827 LIS
最长上升子序列 传送门 题意 对于给定的一个n个数的序列,找到它的一个最长的子序列,并且保证这个子序列是由低到高排序的. 例如,1 6 2 5 4 6 8的最长上升子序列为1 2 4 6 8. 基本思 ...