CSS部分

2018-12-22  本文已影响0人  冬至是条狗

1.使用link标签引入css 文件

<link rel="stylesheet" href="xxx.css">

2.在head中通过sytle标签定义

<style >
      css语句
</style>

选择器 {
        属性：值 ;  属性：值
}

  1. 基本选择器

1.1 标签选择器 直接使用标签 适用于 批量的、统一的、默认的样式
1.2 ID选择器 标签中加入ID 使用时加 # 号 适用于给定标签设置特定样式
1.3 类选择器 标签中加入class 使用时加 . 类名 选择 适用于给某一些标签设置相同的样式

  1. 通用选择器

使用 * 号选择

  1. 组合选择器 特定的时候使用

3.1 后代选择器 使用 ID （空格） 标签名 选择
3.2 儿子选择器 使用 ID > 标签名 选择
3.3 毗邻选择器 使用 ID + 标签名 选择 # 只往下找
3.4 兄弟选择器 使用 ID ~ 标签名 选择

  1. 属性选择器

4.1 可以自定义属性 使用 [属性] 选择
4.2 使用 [属性=“属性值”] 选择
4.3 = 号左边可以使用 ^$* 等类似正则规则匹配，~表示匹配多个使用空格分开的值中的一个

  1. 分组和嵌套 中间要加逗号

5.1 使用 标签,标签 选择
5.2 使用 选择器,选择器 选择
5.3 可以使用 标签 或者 ID 组合使用

  1. 伪类选择器（CS3 新推出）使用 标签 ：

6.1 link 连接没有被点击过
6.2 visited 连接被点击过
6.3 hover 鼠标移上去变色
6.4 active 选定时的状态
6.5 focus 输入框获取焦点样式

  1. 伪元素选择器 （很多），比如段落第一个字变大。

  1. 内联样式优先级最高
  2. 选择器一样的时候，靠近标签的生效
  3. 选择器不一样时候 权重计算永不进位
    3.1 内联选择器 1000权重
    3.2 ID选择器 100 权重
    3.3 类选择器 10 权重
    3.4 元素选择器 1 权重 （标签元素）

  1. 字体

1.1 font-family: " " 后面跟若干字体；

  1. 字体大小

2.1 font-size： 后面跟像素值；

  1. 字重 （粗细）font - weight : ;

3.1 nomal 标准值
3.2 bord 粗体
3.3 border 更粗
3.4 lighter 更细
3.5 100 ~ 900 400等于nomal
3.6 inherit 继承父元素字体的粗细值

  1. 字体颜色 color : 颜色 或者 color ：RGB 或者 color : # ffffff;

  2. 文字对齐

5.1 text - allgn: center 居中
5.2 text-allgn:leif 左对齐
5.3 text-allgn:right 右对齐
5.4 text-allgn:justify 两端对齐

  1. 文字装饰

6.1 text-decoration:none 默认
6.2 text-decoration:underline 定义文本下的一条线
6.3 text-decoration:overline 定义文本上的一条线
6.4 text-decoration:line-through 定义穿过文本下的一条线
6.5 text-decoration:inherit 继承父类

  1. 首行缩进

7.1 text-indent：像素值；

  1. 背景颜色

1.1 background-color: 颜色；

  1. 背景图片

2.1 background-image: url(路径)；
2.2 background-repeat: no-repeat; 设置图片不重复
2.3 background-position: 50% 50%; 可以用百分比 像素 设置图片位置
2.4 background-attachment: fixed; 鼠标滚动背景图固定

  1. 边框属性

1.1 border-width 边框宽度
1.2 border-style 边框样式
1.3 border-color 边框颜色
1.4 border-right 右边框
1.5 border-left 左边框 # 还可以设置上下

  1. display属性

2.1 display：none 不显示
2.2 display：block 块级标签
2.3 display：inline 行内标签
2.4 display：inline-block 同时具有块级和行内的特点

内容-内填充-边框-外边距

通常先去处默认样式

* {
    margin:0;
    padding:0;
}

content 内容
padding 内填充
border 边框
magin 外边框

  1. padding

1.1 内容和边框之间的距离
2.2 padding-top：上边距
2.3 padding-right：右边距
2.4 padding-bottom：下边距
2.5 padding-left：左边距
2.6 padding：auto 自动调整

  1. margin

2.1 边框之外的距离，多用来调整各标签之间的距离
2.2 margin-top：上边距
2.3 margin-right：右边距
2.4 margin-bottom：下边距
2.5 margin-left：左边距
2.6 auto 自动调整

  1. 浮动

div 配合 float 实现页面布局

3.1 float：left：左漂
3.2 float：right：右漂
3.3 float：none：默认不浮动

  1. clear 清除浮动

4.1 clear：left 在左侧不允许浮动元素
4.2 clear：right 在右侧不允许有浮动元素
4.3 clear：both 在左右两侧均不允许有浮动元素
4.4 clear：none 默认值，允许在左右出现浮动元素
4.5 clear：inherit 继承父元素设置

  1. overflow 溢出

控制 溢出时的效果

5.1 overflow：auto； 自动选择
5.2 overflow：scroll；滚动条
5.3 overflow：hidden； 裁剪隐藏
5.4 overflow：inherit；继承父标签
5.5 overflow-x 设置水平 -y 设置垂直

  1. 定位

6.1 position：relative；相对位置，相对于原来的位置
left：像素
top：像素
6.2 position：absolute；相对位置，相对于最近的一个被定位的父标签，没有的话就是body标签
left：像素
top：像素

上一篇下一篇

猜你喜欢

热点阅读