css基础01

来源：互联网发布：snh48黑历史知乎编辑：程序博客网时间：2024/06/03 03:50

css层叠样式表（级联样式表）cascading Style sheets 丰富文档外观，控制文档样式

在head加上<style type="text/css">样式表内容</style>

选择器：一个选择标签的过程

选择器{属性：值；}

属性解释width：20px；宽height 高background-color背景颜色font-size字体大小text-align：left，center，right内容水平的对齐方式text-indent首行缩进

基础选择器：

标签选择器：(选择所有标签)

标签{属性：值；}

类选择器：（谁调用谁生效）

.自定义类名{属性：值；}

类名：不能纯数字或数字做开头和特殊符号和汉字和属性会值定义，可以用_

一个标签可以调用多个类选择器

多个标签可以调用用一个类选择器

ID选择器

#自定义类名{属性：值；}

一个ID选择器在一个页面只能使用一次，两次及以上不符合W3C规范，js调用会出问题

一个标签可以调用一个ID选择器

一个标签可以调用一个ID选择器和类选择器

通配符选择器（不推荐）

*{属性：值；}

*代表所有标签，给所有标签使用相同的样式。

复合选择器：两个及以上选择基础选择器通过不同方式连接一起。

交集选择器：（既满足标签又满足选择选择器才生效）

标签+类（ID）选择器{属性：值；}

<标签 ./id='类名'></标签>

后代选择器：（无限制隔代）重点

标签+空格+选择器{属性：值；}

<标签 ./id='类名'> <标签 ./id='类名'></标签>

</标签>

只要能代表标签，标签，类选择器，ID选择器自由组合。

子代选择器：

选择器>选择器{属性：值；}

选中直接下一代标签。

并集选择器

选择器，选择器{属性：值；}

表达颜色的方式：

颜色名称；十六进制显示颜色0-9 a-f。#000000,前2红，中2绿，后2蓝；rgb（色值，色值，色值）； RGB加色模式；rgba（alpha不透明度0-1）

文本属性和属性连写

属性：font-size：文字大小

font-weight：文字粗细 blod≈700，值100-900

font-family：微软雅黑文本字体

font-style：normal默认 / italic斜体

line-height：行高

属性连写：font：写值就可以

（例如: italic 700 16px/40px 微软雅黑）

按照顺序：font-style font-weight font-size（必写）/font-heigh font-family（必写）

文字的表达方式

直接写字体中文名称，写字体英文名称，unicode编码（f12→找到console→escape（‘字体’））

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

三种样式表的写法

内嵌式写法：<head><style type='text/css'>样式表写法</head>----只作用于当前文件，没有真正的实现结构表现分离

外链式写法:head中<link rel=';stylesheet' href='1.css'>-----作用范围：当前站点，范围广，实现结构表现分离

行内样式表：<h1 style='属性：值'>----------作用范围：当前标签，范围小（不推荐）

标签分类（显示方式）

块元素：典型div，h1-h6，p，ul，li。特点：独占一行，可设宽高。嵌套（包括）下，子块元素宽度（没有定义的情况下）和父块元素宽度默认一样。

行内元素：典型 span，a，strong，em。特点：在一行上显示，不能直接设置宽高，（由内容撑开宽度）

严格来说没有这个→行内块（内联）元素：典型input，img。特点：在一行显示，可以设置宽高。

元素之间的转换

块元素转行内元素 display：inline；转成行内元素，不能设置宽高（内容撑开）

行内元素转块元素 display:block; 转成块元素，可设置宽高。

块和行内元素转行内块元素 display：inline-block；在一行可定义宽高

样式表之层叠性

当多个样式作用于同一类（同一个）标签，样式发生冲突，总是执行后边的代码。（后边代码会层叠前面代码）

样式表之继承性

继承性发生前提：包含（嵌套）关系。文字所有属性可以继承

em=60

特殊：h系列不能继承文字大小，a标签不能继承文字颜色。

样式表之优先级

默认样式<标签选择器<类选择器<ID选择器<行内样式表<！important

0 1 10 100 1000 1000以上（便于理解）

在属性后面加！important-----优先级会变最高

优先级之权重会叠加

优先级的特点：继承权重为0

权重会叠加

链接伪类

a:link{属性：值} 与 a{属性：值} 超链接效果一样----默认状态常用

a:hover{属性：值} ----鼠标放到链接上之后的状态常用

a:visited{属性：值} ----链接访问后状态

a:active{属性：值} -----超链接激活状态，鼠标按上去不松手

a:focus{属性：值} -----获取焦点

链接的文本修饰text-decoration：none / underline不用下划线 / line-through删除线

背景属性

background-color：背景颜色（必须设置高度）

background-image：url（“图.jpg”）背景图片

background-repeat：背景平铺 no-repeat不平铺 / repeat平铺（默认）/ repeat-x / repeat-y

background-position:背景定位 left / right / center / top / bottom ----从浏览器出发

(只写一个方位值，另一个默认居中)。（写两个方位值，顺序没有要求）（写两个具体指，前面值为水平方向，后为垂直方向）

background-attachment：背景是否滚动 scroll滚动（跟着div动） / fixed固定（定位在浏览器）

背景属性连写（没有顺序要求）

background：red url（必写） no-repeat 10px 20px scroll

list-style：none清楚列表项符号

--------------------------------------------------------------------------------------------------------------------------------------------------------------

阅读全文

0 0