CSS与HTML结合

CSS与HTML结合的方式有四种:

style属性:

在每个HTML标签上均有一个style属性, 将样式直接写入标签:

<div style="background-color:red;color:green;">1

<style/>标签:

使用HTML的<style/>标签,将CSS代码在<head/>内:

@import引入:

在<style/>内用@import "CSS-path";引入CSS文件:

注意: 这种方式的浏览器兼容性较差, 不推荐.

<link/>引入:

使用头标签<link/>引入CSS是最常用的结合方式:

注: 结合优先级:

根据书写顺序<由上到下,由外到内>,优先级<由低到高>,即:后加载优先级更高.

CSS选择器

基本选择器

CSS提供的基本选择器有三种:

标签选择器:

使用标签名作为选择对象:

class选择器:

可为每个HTML标签添加class属性以标识该元素:

ID选择器

可为每个HTML标签添加id属性以标识该元素:

扩展选择器

关联选择器:

<div><p>关联选择器</p></div><p>不关联</p>12

HTML代码如上, 可以仅设置<div><p>元素内的样式而忽略单<p>

元素内样式:

div p{  color: crimson; }

组合选择器:

组合选择器可将不同的标签设置成相同的样式:

div, p {  color: darkblue; }

伪元素选择器

伪元素选择器是CSS中已经提供一些样式,可直接引用,如超链接状态:

CSS盒子模型

边框 border

border[-*] : border-width || border-style || border-color

内边距 padding

padding[-*] : length 同border,使用padding可以统一设置,也可上下左右分别设置:

.box-padding-class {  padding-left: 50px; }

外边距 margin

margin[-*] : auto | length

同border,使用margin可以统一设置,也可上下左右分别设置:

.box-margin-class {  margin-top: 50px; }

布局漂浮

float : none | left | right

布局定位

position : static | absolute | relative