03-样式表/css

css

层叠样式表
样式表
- 行内(内联)样式表
  - 生成一个style的html属性
  - 属性值为 css属性：css属性值;
```
 <p style="300px;height:300px;background-color:olive">
    今天
    天气真好，但是我真的好困
 </p>
```
- 内部样式表
  - 生成style的双标签
  - 将标签放到head标签里面
```
<head>
  <style>
    div {
         200px;
        height: 200px;
        background-color: orange;
        color: orchid;
    }
    
    p {
         300px;
        height: 300px;
        color: palegreen;
    }
  </style>
</head>
```
- 外部样式表
  - link引入css
    1. 在站点下面创建一个css文件夹
    2. 在文件夹里创建.css后缀的文件
    3. 创建一个link的单标签，放到head标签里面
```
<link rel="stylesheet" href="" type="text/css">
rel:确定关联的文件类型
href: css文件路径
type: css文件类型
```
    1. 在css文件中直接写css对应的语法，不需要加style标签
  - @import引入css文件
    1. 创建style的双标签，放到head里面
```
  <style>
    @import url("css文件的路径");
  </style>
```
  - 两者的区别
    1. 老祖宗的差别：link属于HTML提供的引用方式，@import是css提供的引用方式，link还可以引入其他文件类型，@import只能引入css文件
    @import url("图标路径"); 不可以引入 2. 加载顺序的区别：link和HTML是同时加载的，@import是当所有html文件加载后再去加载css文件，所以有时候浏览@import加载CSS的页面时开始会没有样式 3. 兼容性 @import只有ie5以上才支持

css语法

选择器{
    声明
    css属性名：css属性值;
    css属性名：css属性值;
    -----
  }

css样式
- 宽度 width 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 高度 height 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 字体颜色 color 颜色单词
- 背景色 background-color 颜色单词
样式表的选择
- 内联样式表一般不使用，如果有简单的几个属性的话可以写
- 内部样式表样式较少，平时写小案例
- 外部样式表开发整页或者整站项目进行使用，做到结构和表现分离
样式表的权重(优先级)
- 行内样式表>内部样式表
- 行内样式表>外部样式表
- 内部样式表和外部样式表根据书写顺序，后写的优先级高（就近原则）
选择器
- 标签选择器
- id选择器
- 标签添加id属性
- #id名{}
- id名不能重复
- 一个标签内id名不能有多个多个之间用空格隔开
- id用来划分网页的外围结构
- class选择器
  - 标签添加class属性
  - .class名{}
  - class名可以重复
  - 一个标签可以有多个class名，多个之间用空格隔开
- 通用选择器可以选择到页面中所有的标签
  - *{ margin:0;去掉外边距 padding:o;去掉内填充 }
- 伪类选择器
  - 选择器:hover{}
```
鼠标放在div身上，所执行的样式
 div:hover {
      color: blue;
       500px;
      background-color: brown;
  }
```
命名方式
- 驼峰命名法（bigBox）
- 下划线连接命名法(big_box）
- 横线链接(big-box)
ps的使用
- ctrl+r 显示/隐藏参考线
- ctrl+k 单位与标尺，修改单位为像素
- alt+滚轮放大或缩小
层叠

css

相关推荐