样式初识-基本样式介绍
1 CSS介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构:
2 选择器
2.1 id选择器
下面的id选择器样式,写在head的style内,如下所示
<head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: gray; height: 45px; } </style> </head>
2.2 class选择器
<style> .c_top{ background-color: gray; height: 45px; } </style>
2.3 标签选择器
所有的div标签,都设置了下面的样式
<style> div{ height: 35px; background-color: gray; } </style>
2.4 层级选择器
层级选择器,也叫关联选择器,中间用空格间隔,如下所示:
<style> div a{ height: 35px; background-color: gray; } </style>
2.5 组合选择器
组合选择器,中间用逗号间隔,如下所示:
<style> #i1,#i2,#i3{ height: 35px; background-color: gray; } </style>
2.6 属性选择器
属性选择器,对选择到的标签再通过属性进行一次筛选,如下所示:
<style> input[type="text"]{width:200px;height: 50px;} </style>
2.7 优先级
样式的优先级,标签上style优先,然后按照编写顺序,采用就近原则。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; color: white; } .c2{ font-size: 18px; color: black; } </style> </head> <body> <div class="c1 c2" style="color:pink;">样式的优先级</div> </body>
3 边框
边框,主要是border,主要有宽度、样式、颜色(border: 20px dotted red;)
如下所示:
<div style="border: 20px dotted red;">样式边框</div>
4 其他常用样式
height 高度 百分比
width 宽度 像素,百分比
text-align 水平方向设置
line-height 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗
<div style="height: 48px; width:80%; border: 1px solid red; font-size: 16px; text-align: center; line-height: 48px; font-weight: bold;"> 显示的内容 </div>
5 float浮动
float,为了让标签浮动起来,块级标签也可以堆叠
<div style="clear: both;"></div> <div style="width: 20%;float: left">1</div> <div style="width: 20%;float: left">2</div>
6 display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block,可以设置无法设置高度,宽度,padding margin
行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin
块级标签与内联标签,通过display进行转换
<div style="display: inline;">显示内容</div> <span style="display: block;">显示内容</span>
7 边距
设置边距,通过margin、padding进行设置,其中:
padding 内边距
margin 外边距
<div style="width: 980px;margin: 0 auto;"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登录</a> <a>注册</a> </div> <div style="clear: both"></div> </div>