潭州课堂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标签

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>

转载于:https://www.cnblogs.com/gdwz922/p/9399198.html

潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)相关推荐

马建威android视频,5.25春季班高级班第三期第五节课课堂总结
来源:雪球App,作者: 阿里爸爸,(https://xueqiu.com/4583899269/180867769) 5.25春季班高级班第三期第五节课课堂总结今天继续由党斐大师给大家带来中炮先锋 ...
潭州课堂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 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式在 HTML 中写入写在的标签里 <script> </script>推荐放在 </body> 结束之前 <!DOCTYPE html& ...
潭州课堂25班：Ph201805201 爬虫基础第一课 (课堂笔记)
爬虫的概念: 其实呢,爬虫更官方点的名字叫数据采集,英文一般称作spider,就是通过编程来全自动的从互联网上采集数据. 比如说搜索引擎就是一种爬虫. 爬虫需要做的就是模拟正常的网络请求,比如你在网站 ...
潭州课堂25班：Ph201805201 爬虫基础第六课选择器 (课堂笔记)
HTML解析库BeautifulSoup4 BeautifulSoup 是一个可以从HTML或XML文件中提取数据的Python库,它的使用方式相对于正则来说更加的简单方便,常常能够节省我们大量的时间 ...
潭州课堂25班：Ph201805201 django 项目第一课 (课堂笔记)
一.Django 现状 1.Django开发前景 1.1 老师做过的项目项目图展示: 1.2 Django的厉害之处在python中,与web开发环境相关的包有13045个 django就占了 ...
潭州课堂25班：Ph201805201 爬虫基础第十五课 js破解二 (课堂笔记）
PyExecJs使用 PyExecJS是Ruby的ExecJS移植到Python的一个执行JS代码的库. 安装 pip install PyExecJS 例子 >>> import ...

潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之 CSS 第二课 (课堂笔记)相关推荐

最新文章

热门文章