本帖最后由 小石姐姐 于 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的区别CSS的概述什么是CSS
- CSS指层叠样式表(Cascading Style Sheets)
- HTML相当于网站的骨架!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
``` <style> h1{ color:blue; font-size: 40px; }</style>```` - 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
``` <link href="../../css/demo1.css" rel="stylesheet" type="text/css" />``` CSS的选择器* 选择器的优先级 * ID选择器>类选择器>标签选择器``` div{ border:1px solid blue; width:40px; height:45px;}``` ``` #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
- 字体:font-family:"微软雅黑"
- 字体加粗:font-weight:400px
- 字体样式:font-style:normal/italic
- 简写:font:style weight size family
- 常用:font:size family
- 颜色:font-color:red
列表
|
|
收藏
淘帖
踩
