css样式

文青争
247 阅读3分钟

引入方式

1. 行内样式 —— 写在html标签中

<div style="width: 100px; height: 100px;"></div>

2. 内嵌样式 —— 写在style标签中如：

<style type="text/css">
	div {
		width: 200px;
	}
</style>

3. 链接样式 —— 使用link标签，如：

<link type="text/css" rel="stylesheet" href="style.css" />

4. 导入样式

@import url("style.css")

如果使用第二种方式即写在style标签中，则最好在head标签中引入。

  • font-family 通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。 最重要，优先级最高 font-size 指定字体的大小。 盒子模型

。简单说盒子模型是由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成的抽象模型。 背景

CSS选择器

1.标签选择器

语法：标签选择器名{属性：属性值；} 例如：body{}、p{}、div{}、table{}....

2.通用选择器

通用选择器用" "号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素， 语法： {}

通用选择器.jpg

3.class选择器

在样式表中写法都是以"."开头，引用时为class=""

class选择器jpg.jpg

4.id选择器

id选择器使用"#"进行标识,引用时为id="" 例如： 样式表中 #a{样式} 引用时

注：id引用时在代码中只能使用一次，而class可以无限次引用

5.属性选择器

作用：根据元素中的属性或属性值来选取指定元素

语法：

[attribute] :用于选取带有指定属性和值的元素。

[attribute = value]：用于选取属性值中包含指定属性和值的元素

[attribute* = value] :匹配属性值中包含指定值的每个元素。

[attribute^ = value] :匹配属性值已指定值开头的每个元素。

[attribute$ = value ] :匹配属性值以指定值结尾的每个元素。

6.关系选择器

1、后代选择器

后代选择器又称为包含选择器，后代选择器可以选择作为某元素后代的元素，

后代选择器的基本语法格式：

E1 E2 {属性1：属性值1；属性2：属性值2；}

image.png

2、子选择器

子选择器只能作为某个元素的子元素。

语法格式：

E > F {属性1：属性值1；属性2：属性值2；}

image.png

3、相邻选择器

相邻选择器就是同一级别有一个共同的父元素

语法格式：

E + F {属性1：属性值1；属性2：属性值2；}

7.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果

语法格式：选择符：伪类{属性1：属性值1；属性2：属性值2；

":link" （未访问过的链接添加样式）

":hover " （鼠标经过，也就是鼠标放在该元素上时添加样式）

":active"　　（当前激活链接，也就是点击鼠标左键时添加样式）

":visited" （已访问过的链接添加样式）　

\

字体

  • font-family:"字体名称"-----用于指定字体名称
  • font-size:字体大小-----用于指定字体大小
  • font-color:字体颜色-----用于指定字体颜色
  • font-sytle:字体样式-----用于指定字体样式(斜体等)
  • font-weight:字体加粗-----用于指定字体的加粗程度(nomal、bold、bolder、lighter、number(整百的倍数))

浮动

float: left; /* 左浮动 / float: right; / 右浮动 / float: none; / 不浮动 */

浮动造成标签的浮动，影响正常文档流空间，脱离正常文档流会对后面的元素产生影响，不会对前面的元素产生影响。

avatar
文章
阅读
粉丝