css学习笔记1

css
一、css是什么

Cascading style sheet 层叠样式表

css3

二、css的好处

1、页面的布局和样式的分离

2、样式可以重复利用

3、浏览器可以缓存样式 提高响应速度

三、CSS的使用方式

1、行内样式

    <div style="color:red;">曹颖颖 没有偶像 太可悲了 必须得有 给你介绍一个 科比</div>

2、内联样式

    <style>

        p {

            color:red;

        }

    </style>

3、外联样式

    <link rel='stylesheet' href='1.css'/>

优先级

    网页加载顺序决定了优先级  就近原则

四、css语法格式

1、基本格式 选择器 {}

2、大括号里写样式

3、样式格式  属性名:属性值;

4、css中注释 /*注释内容*/

五、css中的选择器

1、通用选择器

* {
    color:red;
}

2、标签选择器

p {
    color:red;
}

3、class选择器

.shazi {
  color:red;

}
# 一个标签可以同时拥有多个class类 中间使用空格分开  一个类可以被多个标签使用

4、id选择器（一般都是留给js用）

#shu {
    color:red;
}
# 一个标签不可以同时用有多个id
# 一个id可以被多个标签使用 但是别用 听话啊

5、层级选择器

/*层级选择器*/
.yeye div span {
    color:red;
}

6、组合选择器

/*组合选择器*/
div,.wang {
    font-size:50px;
}

7、伪类选择器

a:link {
  color:red;
}
a:visited {
  color:green;
}
a:hover {
  color:yellow;
}
a:active {
  color:black;
}
/*可靠顺序就是上面的*/
.ddd p:first-child {
  color:#c90;
}
.ddd p:last-child {
  color:#ccc;
}
.ddd p:nth-child(3) {
  color:white;
}
/*选中的p 必须是.ddd元素的 第几个子元素*/

8、属性选择器

input[type=text] {
    color:red;
}

六、选择器优先级

id class * 标签 属性 伪类 组合 层级

id > class > 标签 > *

• 精确原则
  定位越精确的优先级越高
• 权重比例
  !important 10000
  id 1000
  class 100
  标签 10
  所有组合权重加在一起 高的优先级高

• 提升优先级 !important

  p {
  color:green !important;
  }

七、单位

1、px 像素 固定单位

2、rem 相对单位 根据html尺寸大小

3、em 相对单位 很具父级的尺寸大小

5、vw 相对于屏幕宽的百分比

6、vh 相对于屏幕高度的百分比

7、百分比

八、字体修饰

1、color 颜色

english

十六进制    0-f

前两位 红色 中间两位绿色 后两位蓝色

#445566   #456

2、font-size 字体大小

最小12px

3、font-family 字体

宋体 楷体 黑体 微软雅黑 仿宋

4、font-style 字体样式

normal（默认）      italic 斜体   oblique 斜体

5、font-weight 加粗

normal（默认）      bold    加粗（相当于700）  数值 100-900

6、简写形式 font

font:italic bold 30px 宋体;

简写形式顺序固定 要不然可能会有些不好使

九、文本修饰

1、text-align 文本水平对齐方式

left        center      right

2、text-indent 文本缩进

3、text-decoration 文本修饰

none 毛都没有   underline 下划线       overline 上划线    line-through 贯穿线

面试题 如何去除a标签的下划线？？？

4、text-shadow 文本阴影

none：默认 无阴影

text-shadow: -10px 10px 10px red;

    1、水平偏移量 可以为负

    2、垂直偏移量 可以为负

    3、阴影模糊值 不可为负

    4、模糊的颜色

5、text-overflow 文本超出的显示方式

clip    超出截断 

    固定宽高、overflow:hidden

ellipsis    超出显示...

    固定宽高、overflow:hidden、white-space:nowrap

6、line-height 行高

当行高和元素的高度一致时元素内的文本会垂直居中显示

7、vertical-align 对齐方式 常用设置图片

top 顶端对齐        middle 中间对其 bottom 默认底部对齐