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:腾讯软件中心静态页面制作( ...
随机推荐
- Jedis路由key的算法剥离
在Redis集群中,会有很多个分片,如果此时利用Jedis来操作此Redis集群,那么他会把数据路由到不到的分片上.而且如果动态的往集群中增加分片,也不会影响Jedis的功能.究竟是怎么做到的呢? 由 ...
- PHP7.X连接SQLSERVER数据库（CENTOS7）
加入微软的源 curl https://packages.microsoft.com/config/rhel/7/prod.repo > /etc/yum.repos.d/mssqlreleas ...
- 小白的python之路11/14
视频69 固定命令的方式 1 vim /etc/profile 2 vim /etc/bashrc 3 vim /root/.bashrc 4 vim /root/.bash_profile 5 cd ...
- centos7搭建日志服务器
服务器端 修改配置文件 /etc/rsyslog.conf中 $ModLoad imudp $UDPServerRun 514 打开日志服务监听 修改/etc/sysconfig/rsyslog文件 ...
- Windows安装nvm和node, 以及安装live-server
nvm下载源https://github.com/coreybutler/nvm-windows/releases 参考博客: 主要https://www.cnblogs.com/hamsterPP/ ...
- <Python Text Processing with NLTK 2.0 Cookbook>代码笔记
如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...
- Quartz定时任务封装
一般的系统都会有一些定时任务,那么我们将这个定时任务封装起来,只要系统需要添加定时任务时,只需调用此方法传入所需要的值即可完成定时任务. 自己自学整理的一些随笔 1.首先对周期粒度进行封装 publ ...
- Android四大组件之Service --- 如何启动和停止Service？
启动和停止方法主要是通过Intent来实现 以上一篇中的ServiceTest项目为例来启动和停止MyService这个服务 首先修改activity_main.xml中的代码,如下所示:<Li ...
- Python列表的增删改查和元祖
一.定义列表 1.names = ['mike','mark','candice','laular'] #定义列表 2.num_list = list(range(1,10)) #range生成1-1 ...
- int 跟 Integer 的关系
Integer是对象 Int是类型 比如 boolean 和Boolean就也不一样,long和Long等等 作为参数传递时要注意 要进行转换如下 int到Integer: int a=3; Inte ...