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就是在设置属性的.不会牵扯到方法的 ...
随机推荐
- 浏览器HTML5录音功能
一.浏览器HTML5录音功能 二.业务代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 第五周总结&实验报告三
第五周总结&实验报告三 实验报告 1.已知字符串:"this is a test of java".按要求执行以下操作:(要求源代码.结果截图.) ① 统计该字符串中字母s ...
- Mysql 数据库锁表的原因和解决方法
摘自: https://www.csdn.net/gather_2f/MtTaIgxsMTM5NC1ibG9n.html 锁表的原因:当多个连接(数据库连接)同时对一个表的数据进行更新操作,那么速度将 ...
- JavaScript中this的一些坑
我们经常在回调函数里面会遇到一些坑: var obj = { name: 'qiutc', foo: function() { console.log(this); }, foo2: function ...
- 阶段3 1.Mybatis_12.Mybatis注解开发_5 mybatis注解建立实体类属性和数据库表中列的对应关系
创建新项目,一对多 复制刚才关闭的项目的文件 复制到们的新项目里面 复制包的依赖 删减相关代码.只保留这三个查询的方法 模糊查询改成传统的占位符的方式 之前是可以自定义实体类的属性字段,和数据库的字典 ...
- 五：flask-url_for使用详解
from flask import url_for url_for(视图函数名):根据视图函数名指定url,只要视图函数不变,url随便变都不会影响 url_for源码: 示例视图,执行流程 带参数: ...
- .NET中使用EF6与连接MYSQL
ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,不仅支持SQL Server,还支持MySQL.Ora ...
- C#SQL小结
对于c#获取Sql数据目前我采用的是 System.Data.SqlClient.SqlDataReader类. 主要用到如下API: SqlDataReader.Read():每次获取一行的数据,直 ...
- 我在DBGridEh增加一栏复选框及对应操作的解决方案
最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...
- wsl 下安装docker
docker for windows本身其实是可以直接用的,但是仍然有很多不足,比如说:权限问题.没有docker.sock文件.文件编码问题等.而win10自带的wsl可以非常完美地解决这些问题. ...