黑马程序员技术交流社区

标题: HTML部分标签及CSS样式 [打印本页]

作者: 离尘 时间: 2017-12-4 16:16
标题: HTML部分标签及CSS样式
【HTML的块标签】
<div></div> : 默认一个div独占一行
<span></span> ：默认在同一行
【CSS的概述】
层叠样式表
把样式添加到4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明
* 选择器{属性：属性值;属性：属性值}
【CSS的引入方式】
行内样式：直接在HTML的元素上使用style属性设置CSS
<h1 style="color: red;font-size: 100px">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS
<style>
h1{
color: red;
font-size: 50px;
}
</style>
外部样式：单独定义一个.css文件，在HTML中引入该CSS文件
<link rel="stylesheet" href="../css/Demo.css" type="text/css" />
【CSS的选择器】
元素选择器：
div{
border: 1px solid cadetblue;
width: 40px;
height: 45px;
}
ID选择器：
#d1{
border: 12px solid blueviolet;
}
类选择器：可以叠加使用
.divClass{
border: 1px solid yellow;
}

【CSS的浮动】
使用float属性可以完成div的浮动
Float属性的取值
清除浮动效果：使用clear属性
【CSS的其他选择器】
属性选择器：
input[type=“text”]
后代选择器：
空格 ·div span 查找的是所有div的所有span元素
子元素选择器：
div > span找这个div中第一层级的审判元素
并列选择器
选择器，选择器{}
【CSS的样式】
背景字体文本列表
【CSS中的盒子模型】
margin
border
padding
【CSS浮动】
float
【清除浮动】
clear
【定位】
position：
absolute：跟随滚动条滚动
fixed：固定在页面上，不随滚动条滚动
【显示和隐藏】
display：
none:隐藏
block:显示
inline:显示到一行
【CSS的伪类】

作者: O-limin 时间: 2018-3-1 10:32