潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)
CSS 的引入方法：
第一种 ：
<!--直接在标签仙设置-->
<p style="color: yellow">CSS的第一种引入方法</p> 第二种方法，在 head 标签中设置
<style>
div{
font-size: 18px;
}
</style>
第三种方法：
建一 CSS 文件，将设置写入该文件中，
a{
text-decoration: none;
/*去除下划线*/
}
在 head 标签中用 link 标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
font-size: 18px;
}
</style>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body> <a href="javascript:void(0) ">CSS的第一种引入方法3</a> </body>
</html> 当三种方法对同一标签进行操作时，就近原则 选择器：
基本选择器： 标签，id，class
标签
id
class
其中，级别排序： id，class ，标签，
复合选择器：
子选择器，后代选择器，相邻选择器，兄弟选择器
子代选择器：
后代选择器：
相邻选择器：
只对相邻的其下方有效
兄弟选择器
对其下方，同级有效，
分组选择器：
当各个标签的样式是一样的要求，我们可以用该选择器， 统一设置，
属性选择器
hover 的使用{鼠标在其上的效果}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:hover{
color: red;
font-size: 20px;
}
div{
height: 200px; /*高*/
width: 200px; /*宽*/
background: skyblue; /*北景色*/
}
div:hover{
background: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我去百度</a>
<div>我是我</div>
</body>
</html>
操作元素
字体
<style>
p{
font-family: 方正兰亭超细黑简体;
font-size: 2em; /*2倍原字符宽*/
font-style: oblique; /*斜体*/
font-weight: bold; /*字体粗细*/
/*color: #272822;*/
color: rgba(200,100,150,1); /* rgb 三色和透明度 a 的聚会范围0-1*/
}
</style>
文本
居中
div{
height: 200px;
width: 200px;
background: yellowgreen; /*背景包*/
line-height: 200px; /*行高与外框高，实现上下居中*/
text-align: center; /*左右居中*/
}
在a标签中去下划线
a{
text-decoration: none; /*去下划线*/
}
超过框框范围，用 ...表示
p{
height: 150px;
width: 150px;
background: yellowgreen;
/*white-space: normal;*/ /*默认换行*/
white-space:nowrap; /*不换行*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*用 ... 表示 */
}
背景色，背景图
<style>
div{
height: 500px;
width: 500px;
/*background: black; !*背景色*!*/
background-image: url("1.png"); /*背景图*/
background-repeat: no-repeat; /*是否平铺*/
/*background-size: 100px 100px; !*设置图片尺寸*!*/
/*background-size:cover; !*自动调整最外边*!*/
background-size:contain; /*自动调整,最里边*/
background-position: 50px 50px; /*图片偏移，X,Y*/ /* background 颜色 url('图片地址') no-repeat position/contain */
/* */ border: 5px solid yellow; /*边框*/
}
</style>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
} .top{
height: 60px;
width: 100%;
background: black;
}
.mid{
height: 800px;
width: 100%;
background: yellowgreen;
}
.bot1{
height: 120px;
width: 100%;
background: gray;
}
.bot2{
height: 30px;
width: 100%;
background: black;
}
.con{
height: 600px;
width: 500px;
background: white;
margin: 35px auto;
}
.con_top{
height: 40px;
width: 480px;
border-bottom: 1px solid gold; /*盒子下边线*/
margin-left: 10px;
line-height: 40px; /*上下居中，设成与高度一样，*/
}
.con_top h3{
float: left;
font-weight: 300;
border-bottom: 3px solid green;
}
.con_top a{
float: right;
font-size: 20px;
color: darkslategrey;
}
.con_reg{
margin-left: 20px;
}
.con_reg a{
border: 1px solid dimgrey;
border-radius: 5px; /*圆角*/
display:inline-block; /*在块级标签中没有行高，所以要加这句，让其有块级的属性和行内的，*/
height: 40px;
width: 130px;
margin-left: 20px;
line-height: 40px; /*行高和高度一样高*/
text-align: center; /*左右居中*/
}
.con_reg input{
height: 40px;
width: 460px;
margin-top: 20px;
text-indent: 1em; /*缩进1个字符*/
}
.con_reg .tok{
width: 300px;
}
.con_reg .bat{
/*border: 1px red;*/
background: blueviolet;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="mid">
<div class="con">
<div class="con_top">
<h3>请注册</h3>
<a href="#">立即登录></a>
</div>
<div class="con_reg">
<form action="" method="post">
<br><input type="text" name="phone" placeholder="请输入手机号"><br>
<input class="tok" type="text" name="tok" placeholder="请输入短信验证码"><a href="#">获取验证码</a><br>
<input type="text" name="user" placeholder="请输入用户名"><br><br>
<input type="password" name="paw" placeholder="请输入密码"><br>
<input type="password" name="pwd2" placeholder="请再次输入密码"><br>
<input class="tok" type="text" name="con2" placeholder="请输入验证码"><a href="#">图片验证码</a><br>
<input class="bat" type="submit" value="立即注册">
</form>
</div>
</div>
</div>
<div class="bot1"></div>
<div class="bot2"></div>
</body>
</html>
潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)的更多相关文章
- 潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)
什么是HTML 超文本标记语言(HyperText Markup Language,简称 HTML) HTML 是一门标记语言,标记语言由一套标记标签组成, 学习 HTML,其实就是学习标签 HTML ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第四课 登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 潭州课堂25班：Ph201805201 第十课 类的定义，属性和方法 (课堂笔记)
类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- ARMV8 datasheet学习笔记3：AArch64应用级体系结构之Memory order
1.前言 2.基本概念 Observer 可以发起对memory read/write访问的都是observer; Observability 是一种观察能力,通过read可以感知到别的observe ...
- Hacker学习发展流程图
题记:梅花香自苦寒来.转载请注明版权:http://a1pass.blog.163.com/ A1Pass 今天看一位网友的日志上面有一篇名为“学黑的目标”的日志,里面有一个略显粗 ...
- CSS选择器中带点(.)怎么办？
在SharePoint中很多元素的ID都用点(.)来连接的,比如: <li class="ms-cui-group" id="Ribbon.Documents.Ed ...
- RestTemplate -springwebclient
1 使用jar版本 - spring-web-4.3.8.RELEASE.jar 场景:backend,post请求远端,header中加入accessToken,用于权限控制 HttpHeaders ...
- 面向对象编程其实很简单——Python 面向对象（初级篇）
出处:http://www.cnblogs.com/wupeiqi/ 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函 ...
- js篇之对象数据属性与存取器属性
在ECMAScript中,对象属性值可以用一个或两个方法代替,这两个方法就是getter和setter.由getter与与setter定义的属性叫做‘存取器属性’.当程序查询存取器属性的值时,js调用 ...
- 洛谷P4281 紧急会议
传送门啦 思路: $ Lca $ 这个题要求这个显而易见吧.但是难就难在怎么在树上利用 $ Lca $ 去解决三个点的问题. 首先明确三个点两两的 三个 $ Lca $ 中有一对是相等的,我们也会发现 ...
- poj2823 单调队列初步
什么是单调队列:头元素一直是队列当中的最大值,队列中的值按照递减顺序排列,可以从末尾插入一个元素,或从两段删除元素 1.插入元素,为了保证队列的单调性(这里假设为递减性),在插入元素v时要将对位的元素 ...
- cf1061c 普通dp题
题解见https://blog.csdn.net/godleaf/article/details/84402128 这一类dp题是可以压缩掉一维空间的,本题枚举a1到an,枚举到ai时枚举ai的每个约 ...
- poj 1251 poj 1258 hdu 1863 poj 1287 poj 2421 hdu 1233 最小生成树模板题
poj 1251 && hdu 1301 Sample Input 9 //n 结点数A 2 B 12 I 25B 3 C 10 H 40 I 8C 2 D 18 G 55D 1 E ...