CSS学习笔记_day2
目录
一、 css初识
二、 在HTML里面引入css的几种方式
1、 外部引入式
2、文档内嵌式
3、 行内式（元素内嵌式）
三、 选择器
四、盒模型
五、文档标准流
六、浮动
一、 css初识
1、 互联网前三层
HTML 从语义的角度描述页面的结构
CSS 从审美的角度描述页面的样式
JS 从交互的角度描述页面的行为
2、 css
cascading style sheet 层叠样式表
二、 在HTML里面引入css的几种方式
1、 外部引入式
@charset "UTF-8";
div {
width:100px;
height: 100px;
color: red; }
引入代码:
<link rel="stylesheet" href="../css/demoStyle.css">
2、文档内嵌式
<style>
div {
font-size: 90px; }
</style>
3、 行内式（元素内嵌式）
<div style="color: green;width: 200px;font-size: 30px">
我是一个盒子
</div>
三、 选择器
1、 标签选择器
/*01、标签选择器只可以描述共性 没有办法描述个性*/
p {
color: red;
}
2、 id选择器
#p2 {
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p id="p1">我是段落3</p>
</div>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p id="p2">我是段落6</p>
</div>
特点：
01、id选择器在页面里面不能重名
02、可以给页面里面的任一元素命名
03、对应的选择符号 是 #
命名方式:
01：必须以字母开头 不能够以数字开头
02、不能和标签重名
03、命名要有意义
04、一定是英文
05、只能有字母数字下划线 中间不要加空格
3、 类选择器
.p2 {
font-size: 60px;
}
.p3 {
text-decoration: underline;
color: greenyellow;
font-size: 10px;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p class="p2">我是段落2</p>
<p id="p1">我是段落3</p>
</div>
<div>
<p>我是段落4</p>
<p class="p3 p2">我是段落5</p>
特点：
01、类名可以重复
02、可以给页面上面任一标签命名
03、选择符是个点 （.）（这里是个点）
04、一个标签可以同时属于多个类
类上样式 ID 上行为
4、 通配符（*）
* {
color: blue;
font-size: 30px;
}
5、基础选择器的层级关系
层级关系： ID选择器>类选择器>标签选择器>通配符
<style>
#d2 {
color: orange;
font-size: 50px;
}
.d1{
color: green;
font-size: 30px;
}
p {
color: red;
}
* {
/**/
color: purple;
}
</style>
</head>
<body>
<!--<div class="box">-->
<!---->
<!--</div>-->
<!--div.box-->
<!--div.box-->
<!--.box-->
<div class="box">
<p class="d1" id="d2">我是段落1</p>
<p>我是段落2</p>
<p class="d1">我是段落3</p>
<p >我是段落4</p>
</div>
</body>
6、后代选择器
.d3 p{
color: aquamarine;
font-size: 30px;
}
特点：
01、后代选择器描述的是一种共性一种平衡
02、当要把某个元素下面的所有后代元素添加样式的时候 可以用后代选择器
03、后代选择器中间有空格
7、交集选择器
特点：
01、 选择的是 有个h1标签 起了一个 title1的别名 描述的一种元素 不存在任何层级关系
h1.title1 {
text-decoration: underline;
}
02、 交集选择器中间没有空格
8、并集选择器
li,p,span {
color: #ff1e08;
font-size: 30px;
}
特点：
01、 并集选择器 选择两者或两者以上的元素
02、 写法上 中间有逗号
四、盒模型
1、盒模型的5个基本的属性
01、宽度：width 指的是内容区域的宽度
02、高度：height指的是内容区域的高度
03、内边距：padding
001、padding后面一个参数代表四个方向都是40px
padding: 40px;
002、padding后面两个参数代表上为40px 左右为20px 下为30px
padding: 40px 20px 30px;
003、padding后面三个参数代表 上下为40px 左右为20px
004、padding后面四个参数代表上为40px 右为20px
下为30px 左为10px (上右下左 四个方向 )
padding: 40px 20px 30px 10px;
005、分方向写padding
padding-top: 10px;
padding-right:30px;
padding-bottom:40px;
padding-left:20px;
04、 边框：border
Border： 粗细 线形 颜色
border:1px solid blue; border-top:10px solid red ;
border-right:20px dotted yellow;
border-bottom:10px double purple;
border-left:15px dashed green;
05、外边距：margin
使网页在浏览器窗口中居中
<style>
.box {
width: 600px;
height: 400px;
padding: 30px;
border:2px dashed red;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="box">
我是一个页面
</div>
</body>
五、标准文档流
标准文档流里面的微观现象
1、 空白折叠现象
如果元素之间的空格超过一个以上则在页面里面显示的时候 元素中间只会有一个空格产生 想去掉这个空格 则需要连起来写
2、 高矮不齐 底边对齐
3、 自动换行 一行写不满 换行写
4、 Css里面的标签分类
01、HTML 标签分类
容器级元素: h1~H6 DIV ul li ol li dl dt dd
文本级元素：p img a I b u span strong em del
02、 css标签分类
块级元素: h1~H6 DIV ul li ol li dl dt dd p
-01、 块级元素独自霸占一行 不和其他任何元素并列显示
-02、 可以接受宽和高
-03、 如果不给块级元素加宽度 那么他的宽度会变成父亲的100%
-04、
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 300px; }
/*p {*/
/*background-color: green;*/
/*}*/
</style>
</head>
<body>
<div> <p>我</p>
</div>
行内元素: img a I b u span strong em del
-01、 不可以接受宽和高
-02、 行内元素可以和其他的行内元素并列显示
<style>
* {
padding: 0;
margin: 0;
}
p {
width: 200px;
height: 200px; color: white;
/*显示模式*/
/*inline代表行内*/
/*将块级转为行内*/
display:inline;
}
span {
/*将行内转为块级*/
display: block;
width: 200px;
height: 200px;
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<p>我</p>
<p>是</p>
<p>块</p>
<p>级</p>
<span>我</span>
<span>是</span>
<span>行</span>
<span>内</span>
</body>
案例 单击按钮图片显隐
<body>
<input type="button" value="点击我" id="btn">
<br>
<img src="imgs/2.jpg" alt="" id="pic">
<script>
var btn =document.getElementById("btn");
var pic =document.getElementById("pic");
var sta=1;
btn.onclick= function fun(){
if(sta==1){
pic.style.display="none";
sta=2;
}else if(sta==2){
pic.style.display="block";
sta=1;
}
}
</script>
标准文档流里面有很多的规则很多性质
如果我们想让元素在一行上面显示的同时还可以设置宽和高的话 就要 脱离文档标准流
CSS里面 脱离文档标准流的几个方式
01、 浮动
02、 绝对定位
03、 固定定位
六、浮动
性质1、浮动的元素 脱离文档标准流
<style>
* {
padding: 0;
margin: 0;
}
.box1{
width: 400px;
height: 400px; }
.box2{
width: 400px;
height: 400px;
background-color: green;
float: left;
}
.box3{
width: 450px;
height: 450px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
性质2 ：浮动的元素互相贴靠
<style>
* {
padding: 0;
margin: 0;
}
.monkey {
float: left;
width: 150px;
height: 250px; }
.pig {
float: left;
width: 300px;
height: 200px;
background-color: pink;
}
.fish {
float: left;
width: 100px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="monkey">孙猴子</div>
<div class="pig">猪八戒</div>
<div class="fish">沙和尚</div>
性质3：字围效果
<style>
* {
padding: 0;
margin: 0;
}
p {
float: left;
width: 300px;
height: 500px;
background-color: pink;
}
div {
width: 900px;
height: 900px;
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<p></p>
<div>
00000000000000000000000《假如今天是我生命中的最后一天……》 假如今天是我生命中的最后一天。 我要如何利用这最后、最宝贵的一天呢？首先，我要把一天的时间珍藏好，不让一分一秒的时间滴漏。我不为昨日的不幸叹息，过去的已够不幸，不要再陪上今日的运道。
</div>
(注：非原创，源作者：刘祥）
CSS学习笔记_day2的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- Win10安装LoadRunner11
一.下载 地址:http://www.51testing.com/?uid-4827-action-viewspace-itemid-225451 二.安装 本来想写,结果和别人的一样就不写了:htt ...
- Java读取txt文件和写入txt文件
package com.nickwong.code; import java.io.*; /** * Created by Nickwong on 31/07/2018. * 根据1-8楼的建议,优化 ...
- 正则--test exec search match replace
1:test 是正则对象的方法不是字符串的方法,使用例子:正则对象也就是那个设定好的模式对象 var str = "hello world!"; var result = /^he ...
- linux常用命令 运算命令
linux的运算命令 expr命令,对整数进行运算 > expr的运算必须用空格间隔开 > \* 表示转义字符 > 保持先乘除后加减,如果需要优先运算则需要加命令替换符 > 也 ...
- Java实现post和get请求
GET请求:GET请求会向服务器发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行 ...
- Spring-----入门
Spring 入门 一.首先导入核心jar包 commons-logging-1.1.3.jar 日志 spring-beans-4.2.4.RELEAS ...
- PHP取凌晨时间戳
百度出来的没一个正确答案 在此纠正 strtotime('today midnight'); // 今天凌晨时间戳 strtotime('+1 day midnight'); // 明天凌晨时间戳
- linux安装命令出错（could not resolve host mirrorlist.centos.org）
本次问题出现在虚拟机安装的centos7系统之后,使用yum命令安装wget命令(yum -y install wget),出现could not resolve host mirrorlist.ce ...
- nginx常用模块
Nginx模块介绍 核心模块:core module 标准模块:stand modules HTTP modules: Standard HTTP modules Optional HTTP modu ...
- 几个常用内核函数（《Windows内核情景分析》）
参考:<Windows内核情景分析> 0x01 ObReferenceObjectByHandle 这个函数从句柄得到对应的内核对象,并递增其引用计数. NTSTATUS ObRefer ...