Day02 CSS样式
DIV和CSS
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。即<div> 标签。CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的head部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
CSS的使用方式
1、行内样式使用style属性进行设置。2、内部样式在<style>标签中书写CSS样式设置。<style>标签放到<head>中。3、外部样式CSS代码保存到扩展名为.css的文件中，HTML文件通过链接方式引用该CSS文件<link type=”text/css” rel=”stylesheet” href=”CSS文件路径”/>
示例
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>DIV和CSS</title><!--外部样式--><link rel="stylesheet" type="text/css" href="css/01.css"/><!--内部样式--><style type="text/css">div {width: 1000px; height: 100px; background-color: aquamarine;}</style></head><body><!--行内样式--><div style="width: 800px; height: 200px; background-color: #008000;">块1</div></body></html>
三种方式的优先级：就近原则，行内样式>内部样式&外部样式（区分内外部的顺序）三种方式的生效范围：外部样式>内部样式>行内样式
CSS选择器
选择器：通过选择器来找到需要设置样式的元素。常用选择器：标签选择器ID选择器：ID属性值在当前页面唯一，使用“#”来指定类选择器：给标签设置class属性，可重复，类选择器用“.”来指定三大基本选择器的优先级：ID选择器>类选择器>标签选择器
案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>选择器</title><style type="text/css">/*标签---优先级3*/h1 {color: red;}/*ID---优先级1*/#first {color: #008000;}#secend {color: chartreuse;}/*类选择器---优先级2*/.h1 {color: orange;}</style></head><body><h1 id="first">好好学习</h1><h1 id="secend">天天向上</h1><h1 class="h1">少壮不努力</h1><h1 class="h1">老大徒伤悲</h1></body></html>
CSS基本样式
1、字体样式文字大小：font-size: large;文字粗细：font-weight: bold;文字字体：font-family: "宋体";文字倾斜：font-style: italic;2、文本样式文本对齐方式：text-align: center;文本颜色：color: #FF1493;文本装饰：text-decoration: underline;设置行高：line-height:200px ;3、超链接伪类样式a：所有超链接a:link{}点击前超连接文字格式a:visited{}点击后超连接文字格式a:hover{}鼠标悬浮时（鼠标移至链接）a:active{}鼠标未释放注意：cursor属性是调整鼠标样式，常用值：pointer,help,wait...4、边框样式边框宽度：border-width按照方向设置：border-(left/right/top/bottom)-width边框颜色：border-color按照方向设置：border-(left/right/top/bottom)-color边框风格：border-style按照方向设置：border-(left/right/top/bottom)-style以上可简写为：border：width值 边框线条样式 颜色；圆角边框：border-radius按照方向设置：border-(top/bottom)-(left/right)-radius5、背景样式背景颜色：background-color:背景图片：background-image:url(“图片路径”);背景是否平铺：background-repeat:repeat/no-repeat/repeat-x/repeat-y背景图片大小：background-size:200px 300px;背景偏移：background-position:20px 50px;
案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css基本样式</title><!--内部样式--><style type="text/css">/*这里使用的是ID选择器*/#first {width: 200px;height: 200px;/*字体样式*/font-size: large;font-weight: bold;font-family: "宋体";font-style: italic;/*文本样式*/text-align: center;color: #FF1493;text-decoration: underline;line-height:200px ;/*边框基础样式*/border-width: 5px;border-color: yellow;border-style: double;/*border: double 5px yellow ;*/border-radius: 20%;/*背景样式*/background-color: antiquewhite;background-image: url("img/timg.jpg");background-size: 200px 200px;background-repeat: no-repeat;background-position: center;}/*这里使用的是标签选择器*//*超链接伪类样式*/a:{color: blue;}a:link{color: black;text-decoration: none;}a:visited{color: green;}a:hover {color: pink;cursor: wait;}a:active{color: orange;}</style></head><body><div id="first">少年郎，看我！</div><br /><br /><a href="">百度一下</a></body></html>
盒子模型
HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。
padding内边距
也叫做填充，指内容与边框之间的空间。样式属性：padding,padding-top,padding-right,padding-bottom,padding-leftpadding属性的值：一个值：padding:20px;4个方向内边距都是20px两个值：padding:20px 30px;上下20px，左右30px三个值：padding:20px 30px 40px;上20px，右边30px，下40px，左同右四个值：padding:20px 30px 40px 50px;分别是上右下左
margin外边距
也叫做空白边，是添加在边框外围的空间。一共有5种属性：margin,margin-top,margin-right,margin-bottom,margin-leftmargin属性值类型与padding一致。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div {width: 200px;height: 200px;background-color: aliceblue;border: solid 5px green;color: darkmagenta;font-size: larger;/*内边距*//*padding: 50px;*//*padding:20px 50px;*//*padding: 20px 30px 40px;*/padding: 10px 20px 30px 40px;/*外边距/空白边*//*margin: 50px;*//*margin:20px 50px;*//*margin:20px 50px 80px;*//*margin:20px 50px 80px 100px;*//*相对于父标签水平居中*/margin: auto;}</style></head><body><div>盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型</div></body></html>
浮动
浮动是一种非常有用的布局方式，它能够改变页面中对象的前后流动顺序。这样做的好处是，使得内容的排版变的简单，具有良好的伸缩性。属性：float常用值：left，right使用浮动的<div>会向Z轴方向移动，原本所在的位置会被后面的标签挤占。如果想要几个<div>横向排列，那么就将这几个<div>都设置相同的浮动。如果想要后面的<div>不受前面浮动了的<div>影响，可以使用clear来清除浮动带来的影响。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>浮动</title><!--同一方向浮动会使div横向排列--><style type="text/css">#top {width: 100px ;height: 100px;background-color: #008000;float: left;}#middle {width: 150px ;height: 150px;background-color: red;float: left;}#bottom {width: 200px ;height: 200px;background-color: blue;float: left;}#secendLine {width: 150px ;height: 150px;background-color: blue;clear: both;}</style></head><body><div id="top"></div><div id="middle"></div><div id="bottom"></div><div id="secendLine"></div></body></html>
定位
改变元素位置。属性：position属性值：relative：相对定位。相对于原来的位置进行偏移，原本的位置保留。absolute：绝对定位。会破坏文档流，在Z轴方向移动，原本的位置会被后面的<div>挤占。相对于页面左上角进行偏移。原本的位置，不会保留。fixed：固定定位。会固定在指定的位置，不受滚动条的影响。相对于页面的某个角来进行偏移。偏移量属性：left，top，right，bottom。属性值：偏移的像素值。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>定位</title><style type="text/css">#top {width: 100px ;height: 100px;background-color: green;/*绝对定位--原始位置不保留*/position: absolute;top: 30px;}#middle {width: 150px ;height: 150px;background-color: red;/*相对定位--原始位置保留*/position: relative;left: 220px;top: 20px;}#bottom {width: 200px ;height: 1000px;background-color: blue;}#fixed {width: 100px;height: 100px;background-color: black;border-radius: 50%;/*固定定位--原始位置不保留*/position: fixed;right: 200px;bottom: 100px;}</style></head><body><div id="top"></div><div id="middle"></div><div id="bottom"></div><br /><br /><div id="fixed"></div><div style="width: 100px; height: 100px; background-color: #FFFF00;"></div></body></html>
标签类型转化
HTML标签分为三种不同的类型，块元素，行元素，行块元素。块元素：以区域块形式出现，独占一行（自动换行），可以设置宽高。常见的块元素：<div>、<h*>、<p>、<ul>、<li>、<ol>...行元素：按行排列，不会自动换行，不能设置宽高。常见的行元素：<strong>、<em>、<font>、<a>...行块元素：按行排列，不会自动换行，但是可以设置宽高常见行块元素：<img/>、<textarea>...行块元素的转换:属性：dispaly属性值：inline：将该元素设置为行元素（行元素的默认值）block：将该元素设置为块元素（块元素的默认值）inline-block：将对象呈现为内联元素，对象内的元素块级展示（设置为行块元素）none：隐藏元素
案例：实现横向导航栏效果
实现横向展示的两种方式：浮动，display:inline-block。1、浮动元素之间没有外边距，display:inline-block有默认外边距2、浮动会对后面的元素产生影响，display:inline-block不会3、非强制情况下，推荐使用display:inline-block
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>横向导航栏</title><style type="text/css">li {width: 100px;height: 30px;background-color: deeppink;text-align: center;line-height: 30px;border-radius: 10%;/*中间有空隙*//*display: inline-block;*//*中间没有空隙*/float: left;/*list-style-type属性是用来定义列表项符号*/list-style-type: none;}a {color: white;text-decoration: none;}a:hover {color: orange;}</style></head><body><ul><li><a href="">首页</a></li><li><a href="">天猫</a></li><li><a href="">聚划算</a></li><li><a href="">天猫超市</a></li><li><a href="">苏宁易购</a></li></ul></body></html>
