黑马程序员技术交流社区
标题:
【石家庄校区】第2章 CSS篇
[打印本页]
作者:
玩玩
时间:
2017-11-19 15:04
标题:
【石家庄校区】第2章 CSS篇
本帖最后由 小石姐姐 于 2017-11-20 15:04 编辑
第2章 CSS篇
* span:跨度* margin:页边的空白; 极限; 边缘* padding:垫充, 填料, 垫塞* bottom:底部,下端* content:内容* link:链接* visit:访问* hover:* block:积木
常用标签
<div>:块级元素
<span>:行内元素
<ul>:无序列表
<a>:超链接
<i>:斜体
HTML的块标签
块级元素:<div></div>,独占一行,可以修改高度和宽度
块级元素转行内元素添加属性display:inline;
行内元素:<span></span>,默认在同一行,不可以修改高度和宽度
行内元素转块级元素添加属性display:block;
行内块级元素:<img>,不独占一行,并且可以修改高度和宽度
如果需要转换成行内块级元素，添加属性display:inline-block;
table和div的区别
div更加灵活并且解析加载速度快
CSS的概述
什么是CSS
CSS指
层叠样式表
(Cascading Style Sheets)
HTML相当于网站的骨架!CSS对骨架进行美化!
CSS在哪些地方使用:
任何网站都会使用CSS去美化页面!!!
CSS的基本语法
CSS的基本语法通常包含两个部分
选择器{属性:属性值;属性:属性值...}
选择器:h1
声明:(color:red)(font-size:14px)
```
h1{ color:red; font-size:14px;}
```
CSS的引入方式
行内样式:直接在HTML的元素上使用style属性设置CSS
只有一个标签自己使用
<h1 style="color:red;font-size:200px;">标题1</h1>
页面内样式:在HTML的<head>标签中使用<style>标签设置CSS
页面内样式:同一个HTML文件中使用了相同的样式
```
<style> h1{ color:blue; font-size: 40px; }</style>`
```
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
多个HTMl文件中使用相同的样式
```
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
```
CSS的选择器
* 选择器的优先级 * ID选择器>类选择器>标签选择器
元素选择器
```
div{ border:1px solid blue; width:40px; height:45px;}
```
ID选择器
```
#d1{ border:1px solid blue; width:40px; height:45px;}
```
类选择器
```
.h-100{ float:left;}
```
CSS的复合选择器
属性选择器
标签名[属性名='属性值']{},查找的是该标签中所有的符合该属性的元素
```
<style> input[type="text"]{ background-color: red; }</style>
```
后代选择器(
子孙元素选择器
)
div span 查找的是所有div中的所有的span元素.
```
h1 strong{ color:red;} <h1> This is <strong>very</strong> <strong>very</strong> important. </h1> <h1>This is <strong>very</strong> <em>really <strong>very</strong> </em> important. </h1>
```
子元素选择器
div > span找这个div中的第一层级的span元素.
```
h1 > strong{ color:red;} <h1> This is <strong>very</strong> <strong>very</strong> important. </h1> <h1>This is <strong>very</strong> <em>really <strong>very</strong> </em> important. </h1>
```
CSS的浮动
为什么要使用浮动float?为了让默写标签(块级元素,div,li)横着显示
如何使用浮动?float:left
如何清除浮动?clear:both||clearfix
在浮动的元素后面添加<div style="clear:both">不建议使用
给浮动的元素的父元素添加一个clearfix
```
/*清除浮动样式*/.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}
```
CSS中的继承问题
在CSS中宽度可以继承,高度不可以继承
注意:浮动以后的元素是不会继承宽度的
```
* div居中:`margin:0 auto`* 百分比和px的计算 calc(30% - 2px);注意事项:减号的两边必须有空格
````
CSS中的盒子模型
内边距：padding
边框：border
外边距(盒子与盒子的距离)：margin
宽度计算方式:padding-left+padding-right+border-left+border-right+content
CSS中的定位
position 属性设置定位
relative:相对定位
absolute:绝对定位
只需要记住:使用的时候记住:子绝父相
使用两个属性:left,top
fixed : 制作广告的时候使用
```
<body> <!--需求：里面的小盒子定位是absolute，想要根据外面div的盒子设置左右距离--> <div style="width: 500px;height: 500px;background-color:aqua;margin-left: 30px;position:relative"> <!-- 父元素相对定位 --> <div style="width: 100px;height: 100px;background-color: red;position:absolute;top:0;left:0"><!-- 子元素绝对定位 --> </div> </div></body><body> <div style="height: 200px;width: 100px; background-color: #000000;position:fixed;right: 0;top:30px;"></div></body>
```
超链接的伪类
a:link{color:#FF0000}
a:visited{color:#00FF00}
a:hover{color:#FF00FF}
a:active{color:#0000FF}
CSS的样式总结
背景
背景颜色:background-color:red
背景图片:background-image:"url(xx.png)
背景重复:background-repeat:no-repeat
背景位置:background-position
背景缩写:background:color image repeat position
背景大小:background-size:
边框
边框简写:border:1px solid black
文本
左右对齐:text-align:center/left/right
去除下划线:text-decoration:none
上下居中:line-height=100px;height=100px
字体
字体大小:font-size:12px
最小12px,取偶不取奇
字体:font-family:"微软雅黑"
字体加粗:font-weight:400px
字体样式:font-style:normal/italic
简写:font:style weight size family
常用:font:size family
颜色:font-color:red
列表
去掉小圆点:list-style:none
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2