前端学习---(2)CSS基础

CSS 用来干什么？

CSS 是用来指定文档如何展示给用户的一门语言------如网页的样式、布局、等等。

1. css语法: 选择器{ 属性名: 属性值; 属性名: 属性值; }

   h1 {
     color: red;
     font-size: 5em;
   }

   h1: 选择器

   color: 属性 冒号之前是属性，冒号之后是值。

   font-size: 属性 冒号之前是属性，冒号之后是值。

2. CSS四种基本选择器

   • 标签选择器：针对一类标签 如<p> <div>,所有的标签都可以是选择器,选择的是所有 不是一个
     标签选择器示例 p{ font-size:14px; }

     • id选择器：针对某一个特定的标签使用 选择符号#, 任何html标签都可以有id属性,id属性名不能是标签名,不能重复,且需要字母开头
       id选择器示例 #mytitle{ border:3px dashed green; }
     • 类选择器：针对你想要的所有标签使用 选择器用.标识 一个标签可以有多个类 例如: <p class="lv da">段落1</p>
       id选择器 #mytitle{ border:3px dashed green; }
     • 通用选择器（通配符）：针对所有的标签都适用

     css尽量使用class, js 要通过 id 属性得到标签 容易混

3. 伪类选择器
   静态伪类：只能用于超链接的样式。如下：

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

4. 动态伪类：针对所有标签都适用的样式。

   :hover "悬停"：鼠标放到标签上的时候
   :active "激活"： 鼠标点击标签，但是不松手时。
   :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点

伪类使用示例

<style type="text/css">
/*鼠标悬停，放到标签上的时候*/
    a:hover {
        color: yellow;
    }
</style>

5. css的继承性

   关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

   关于盒子、定位、布局的属性，都不能继承。

6. 属性层叠性。层叠性：就是css处理冲突的能力

   选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器

   权重相同，就近原则(下面覆盖上面)

7. 动效也是由css完成的

8. 字体也是css

知道什么是什么,知道知识点属于那一块,用的时候再查,