web前端基础——CSS（一）

web前端基础——CSS

CSS（一）

---

web前端基础（一）

本文仅是学习过程中的简略笔记，如有错误，烦请指正。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

css设置网页元素的外观样式，行为

二、具体内容

.CSS

根据书写样式，书写位置css可分为
1.行内式（内联样式）

<标签名 style=”xxx,xx,”;></标签名> (字体字号及颜色）
< input style=”color:pink;fort-size:18ps; />

2.内部样式表（内嵌样式表）

< head>
< style type=”text/css” >
选择器{ (选择的标签）
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；}
< /style>
< /head>

（type=”text/css”可省略，仅作用于当前页面）px表示像素
3.外部样式表（外链表）
可将结构与样式完全分离

< head>
< link rel=”stylesheet” type=”text/css” herf=”文件路径”/>
< /head>

link是单标签
通过link将外部样式文件链接到html文档
rel定义当前文档与被连接文档之间的关系，需要指定为stylesheet，表示被连接文档是一个样式表文件
type定义所链接文档的类型，需要指定为“text/css”表示外部文件是css样式表
href表示路径

文件内可直接写需要文本样式

eg：h3 {
Color:deeppink;
Font-size:20px;
}

css选择器（基础选择器+复合选择器）
基础选择器：
1.标签选择器（元素选择器）
将页面中选到的（div或span）所有的标签全部选择（div，span无语义）

eg：< style>
div{
属性值
}
Span{ …
}
< /style>

2.*类选择器（可为对象定义单独的样式）
(谁用谁调用，class来调用，类名别写错）
多类名：与单独类名相似使用点定义（.xxx{ }），

eg:< style>
.xxx{ (上面点定义xxx为类名）
属性值；
}
< /style>
…
< div class=”xxx”>

3.id选择器
元素的id是唯一的,只应用于文档中的唯一性的元素

#xxx{
属性}
…
< p id=”xxx”>…< /p>

4.通配符选择器
用*表示，*就是选择所有的标签，

*{属性1，属性值；属性2，属性值；}

复合选择器
（1）后代选择器
又称包含选择器，用来选择元素组的后代，

父级 子级{属性：属性值；属性：属性值} （空格隔开父子）*选父级的后代
.class名{属性：属性值；}

（2）子元素选择器

父级 > 子级{属性：属性值}
*只选父级的亲儿子

（3）交集选择器

标签名.标签名{属性：属性值}

2.并集选择器
并集选择器通常用于集体声明，逗号隔开。

标签名，
标签名，
标签名{属性：属性值}

3.伪类选择器（链接伪类选择器）
连接的样式格式需单独指定样式。

：标签名{ }（类选择器 .标签名{ }）
（类选择器是一个点.而伪类选择器是两个点：）（先后顺序为lvha）
a:link /未访问的连接/
a:visited /已访问过的连接/
a:hover /鼠标移动到连接上/
a:active /选定的连接/

CSS三大特性

1.层叠性
指多种样式的叠加。样式冲突，采用就近原则；样式不冲突，则不层叠。
2.继承性
子标签会继承父标签的样式，（text-，font-，line-，color）

3.优先级
*多个样式作用于同一个元素，同选择器则就近，不同选择器则取决于权重。

• ！Important > style > id(#) > class(.) > div,
  每个元素之间没有进制，级别不可超越（0,0,0,0）<(0,0,1,0)<(0,1,0,0)<(1,0,0,0)
  继承或*<元素<类<id<行内样式<！Importan
  *权重叠加，样式决定于数值大的，没有进位，继承的权重为0.
  *先看该标签是否被选中，优先选择被直接选中的标签，

Css属性书写顺序：

1.布局定位属性：
display显示/ postion位置 /float浮动 /clear 清除/visibility / overflow隐藏
2.自身属性：
width 宽度/height 高度/margin /padding 边距/border 边框/background背景
3.文本属性：
color/ font/ text-decoration /text-alion/vertical-alion/white-space/break-word
4.其他属性：content/cursor…………