0%

CSS

基础

一、文字相关

1、字体属性

基础属性

1
2
3
4
5
6
7
8
9
10
p{
color: red; /*字体颜色*/
font-size: 5px; /*字体大小*/
line-height: 15px; /*行高*/
font-family: 幼圆,黑体; /*字体类型:如果没有幼圆就显示黑体,没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体,normal表示不倾斜*/
font-weight: bold/normal; /*粗体*/
font-variant: small-caps; /*小写变大写*/

}

垂直居中

1
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

vertical-align属性可用于指定行内元素(inline)、行内块元素(inline-block)、表格的单元格(table-cell)的垂直对齐方式。主要是用于图片、表格、文本的对齐。

2、文本属性

3、列表属性

4、浮动属性

1
2
3
a{
float: left/right/none/inherit
}

二、背景相关

1、常用背景属性

  • background:url(“”);设置背景图片,可以逗号隔开设置多个背景自适应
  • background-color: 可以使用英语单词、rgb(),16进制、rgba()等方式
  • background-repeat: no-repeat/repeat(默认)/repeat-x/repeat-y
  • background-position: 向右偏移量(或者left、center、right) 向下偏移量(top、center、bottom)
  • background-attachment: fixed/scroll;设置背景是否固定
  • background:red url(1.jpg) no-repeat 100px 100px fixed;

  • background-size: width height(百分比、cover、contain)

  • background-origin: padding-box/border-box/content-box;从哪里开始加载
  • background-clip: padding-box/border-box/content-box; 超出部分裁剪
  • background-image: 颜色渐变
  • clip-path: 元素裁剪

三、样式表和选择器

1、基础选择器

①标签选择器

②ID选择器

1
2
#mytitle{ border:3px dashed green; }
/* 使用#来进行选择 */

③类选择器

1
2
.one{ width:800px; }
/* 使用.来进行选择 */
1
2
<h3 class="teshu  zhongyao">我是一个h3啊</h3>
<!-- 同一个标签可以使用多个类,使用空格隔开 -->

④通配符匹配

1
2
3
4
* {
margin-left: 0px;
margin-top: 0px;
}

2、高级选择器

①后代选择器

1
2
3
4
5
6
<style type="text/css">
.div1 p {
color: red;
}
</style>
/* 使用空格表示后代关系 */

②交集选择器

1
2
3
4
h3.special {
color: red;
}
/* 定义时紧密相连,表示连续满足 */

③并集选择器

1
2
3
4
5
6
7
p,
h1,
#mytitle,
.one {
color: red;
}
/* 定义时用逗号隔开,表示都选择 */

四、伪类

同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示

1、静态伪类

  • :link 超链接点击之前
  • :visited 链接被访问过之后

2、动态伪类

  • :hover “悬停”:鼠标放到标签上的时候
  • :active “激活”: 鼠标点击标签,但是不松手时。
  • :focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)

3、超链接a的伪类

  • :link “链接”:超链接点击之前
  • :visited “访问过的”:链接被访问过之后
  • :hover “悬停”:鼠标放到标签上的时候
  • :active “激活”: 鼠标点击标签,但是不松手时。

    注意要按照顺序写

    注意:

    a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态(前提是都具有了相同的属性)

五、继承性和层叠性

1、继承性

参考链接

2、层叠性

当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:

  • id 选择器
  • 类选择器、属性选择器、伪类选择器
  • 标签选择器、伪元素选择器

因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器

冲突总结:

六、