CSS
CSS的四种引入方式:
一、行内样式
<div style="background-color: blue;color: brown">cairui</div>
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: blue;
color: darkgoldenrod;
}
</style>
</head>
<body>
<p>cai</p>
<div>rui</div>
</body>
</html>
三、写一个css文件,把内容放在里面引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "1.css";
</style>
</head>
<body>
<p>cai</p>
<div>rui</div>
</body>
</html>
四:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>cai</p>
<div>rui</div>
</body>
</html>
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#www{
background-color: chartreuse;
color: brown;
}
</style>
</head>
<body>
<p id="www">cai</p>
<div>rui</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.www{
background-color: chartreuse;
color: brown;
}
</style>
</head>
<body>
<p class="www">cai</p>
<div>rui</div>
</body>
</html>
id是唯一的(类似身份证),class是可重复的
组合选择器:
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,div{
background-color: chartreuse;
color: brown;
}
</style>
</head>
<body>
<p class="www">cai</p>
<div>rui</div>
</body>
</html>
E F 后代元素选择器,匹配所有属于E后代的F元素,E和F之间用空格分隔
E>F 子元素选择器,匹配所有E元素的子元素F
E+F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
伪类选择器:
专用于控制链的显示效果,伪类选择器:
a:link(没有接触过的链接),用于定义链接的常规状态
a:hover(鼠标放在链接上的状态),用于产生视觉效果
a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态
伪类选择器:伪类指的是标签的不同状态:
a ==>点过的状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link{color:#FF0000}/*未访问的链接*/
a:visited{color:#00FF00}/*已访问的链接*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: red;
}
a:hover{
color: chartreuse;
}
a:visited{
color: darkgray;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点击</a>
</body>
</html>
CSS的属性:
1、颜色属性
<div style="color: red">cairui</div>
<div style="color: #00bFFF">cairui</div>
2、字体属性
font-size: 50px;
font-family: 宋体;
font-weight: 100; #加粗
3、背景属性
background-color: red;
background-image: url("task.PNG"); #背景图片
background-repeat: no-repeat; #背景图片不重复
background-position: right top; #背景图片所在的位置
4、文本属性
font-size: 10px;
text-align: center;横向排列
line-height: 200px;文本行高,通俗讲,文字高度加上文字上下的空白区域的高度50%;基于字体大小的百分比
text-indent: 150px;首行缩进,50%;基于父类(weight)的百分比
letter-spacing: 10px;
5、边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 50px;
background-color: red;
border-style: solid; #边框为实线边框
border-color: blue; #边框颜色
border-width: 20px; #边框高宽
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6、列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: decimal-leading-zero; #01,02,03开头
list-style: none; #去掉开头的样式
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
7、dispaly属性
- none
- block
- inline
改变一个文本是块级标签还是内联标签。还有none是使其消失。
8、盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: darkgray;
width: 300px;
border:25px solid green; #边框
padding: 25px; #内边距
margin: 25px; #外边距
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
CSS Float(浮动)
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
在这里,我们对图片廊使用 float 属性:
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊:
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的四个值:
- static
- relative
- fixed
- absolute
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
relative 定位
相对定位元素的定位是相对其正常位置
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
http://www.runoob.com/css/css-positioning.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- raise ValueError("Cannot convert {0!r} to Excel".format(value))
- ImportError: cannot import name 'Process' from 'multiprocessing'
- mac卸载mysql
- 不可错过的Webpack核心知识点
- APP+Web混合全局版的几种布署方法
- 关于合并pdf文件出现的问题
- Python中的with是测试常用到的资源打开利
- python批量运行py文件
- beautifulsoup的使用
- PWN:House Of Einherjar
- 2.用Python套用Excel模板,一键完成原亮样式
- Vmware Centos7 配置静态 ip 和 使宿主机和虚拟机互相 ping 通
- Hadoop安装成功之后,访问不了web界面的50070端口怎么解决?
- 2.1 注释
- 2.2 标识符