CSS(一) 邂逅

邂逅 CSS

一，初识css

1.基本概念

1.1 CSS的全称是Cascading Style Sheets，层叠样式表

1.2 书写格式

样式名: 样式值；例如：color：red

1.3 引入css的三种方式

1 内联样式




  
  Document


  p内容
  h2 element

2.文档样式，内嵌样式




  
  Document
  


  我是段落
  我是标签

引入外部样式

style.css文件
p {
  color: red;
  font-size: 30px;
}
h2 {
  color: beige;
  background-color: #fff;
  font-family: "宋体";
}




  
  Document
  


  内容
  内容
  标题

补充

引入方式可以使用 @import url();方式




  
  Document
  


  段落
  标题

引入方式可以放在另外一个css文件中，且css文件可以设置编码方式

/* 指定css的编码方式，以防css中出现中文，比如下方的 宋体 */
@charset "utf-8";
/* 引入另外一个css */
@import url(./base.css);
p {
  color: red;
  font-size: 30px;
}
h2 {
  color: beige;
  background-color: #fff;
  font-family: "宋体";
}
/* 此时 引入该样式文件相当于引入了两个样式文件 */

二，细节

2.1 注释

css的注释方式 /* */

2.2 HTML CSS 编写准则

结构与样式分离

结构与样式分离：不要用自身属性去修改样式




  
  Document

2.3 设置网页图标

案例：设置京东网页图标
- 使用 link 元素,（link可以用来引入样式，还可以设置网页图标）
- rel 属性指定文档与链接资源的关系
- 一般 rel 确定，type确定，所以可以省略type
- 网页图标支持的图片格式 ico png 常用大小：16x16 24x24 32x32

2.4 驼峰标识

小驼峰：形如：lastContent
- html
- css
- js 函数名字
大驼峰：所有单词首字母都大写
- js中定义类的名字

三，CSS简史

3.1 版本发展

CSS1 CSS2 CSS2.1 CSS2.2
CSS3：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼
CSS4：是CSS 2.x以后对某一些CSS模块进行升级更新后的称呼
CSS标准：草稿 -> 备选标准 -> 标准（所以会出现兼容性问题）

3.2 常用属性

文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体：font、font-family、font-style、font-size、font-variant、font-weight
背景：background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型：width、height、border、margin、padding
列表：list-style
表格：border-collapse
显示：display、visibility、overflow、opacity、filter
定位： vertical-align、position、left、top、right、bottom、float、clear

3.3 网址

https://www.w3.org/standards/techs/css
https://www.w3.org/TR/CSS22/
https://www.w3.org/TR/CSS22/propidx.html
到https://caniuse.com/查询CSS属性的可用性

四，CSS基础选择器

4.1 通配选择器




  
  Document
  


  标题
  段落
  块er

4.2 元素选择器




  
  Document
  


  我是一个段落
  我是一个div
  我是一个段落
  我是一个div

4.3 类选择器




  
  Document
  
  


  我是一个段落
  我是一个div
  我是一个段落
  我是一个div

4.4 id选择器




  
  Document
  


  
  头部
  中间
  标题
  尾部

五，常用的CSS属性（案例）




  
  Document
  


  
  我是一个内容

  
  我是一个段落

  
  我是div
  我是span
  我是span
  
  
  哈哈哈
  
  我是span

六，颜色

6.1 颜色起源

RGB颜色：通过R（Red）、G（Green）、B（Blue）三种颜色通道的变化、叠加产生各式各样的颜色
每种颜色使用一个字节进行存储，也就是 8 个bit位，也就是 0 ~ 255

6.2 颜色的表现形式

单词：red green
rgb：rgb（255，255，255）
rgba(red, green, blue, alpha)：相比rgb，增加了透明度，1表示不透明，取值在0~1
十六进制表示形式：#00ffff，简写：#0ff（比较建议，因为可以减缩css代码体积，从而减小文件大小，加快页面响应速度）

6.3 rgb 表现规律

RGB颜色值越大，越靠近白色，越浅色
RGB颜色值越小，越靠近黑色，越深色
RGB颜色值一样的，一般是灰色

6.4 案例




  
  
  
  Document
  


  使用英文单词
  使用rgb
  使用rgba
  我是使用十六进制的

七，CSS属性-文本

7.1 text-decoration 文本装饰




  
  Document
  


  百度一下
  
    淘宝一下
  

  
  我是p元素
  我是span元素
  我是div元素

  我是u元素，我自带下划线

7.2 letter-spacing word-spacing 字母单词之间添加间距




  
  Document
  


  Hello World
  Hello World
  Hello World

img13

7.3 text-transform 设置文字的大小写转换




  
  Document
  


  MY Name is wangshuaibing
  MY Name is wangshuaibing
  MY Name is wangshuaibing

img14

7.4 text-indent 设置第一行内容缩进




  
  Document
  


  
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落
    这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落

7.5 text-align




  
  Document
  


  我是div
  
    
  
  
    
    
    
    我是嵌套在一个div中的div
  
  
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
    Hello WorldHello WorldHello WorldHello WorldHello WorldHello

img15

八，CSS属性-字体

8.1 字体先知

字体来自于操作系统，想让浏览器上应用某种字体，其操作系统中若不存在，也不会生效，而是会使用操作系统默认的字体

8.2 font-size

设置时需要数值 + 单位（单位有很多，暂时只需要知道 px（像素） em即可）

当然还可以使用百分比（基于父元素，比如50%是父元素font-size的一半）




  
  Document
  


  
    
      
      我是span元素
    
    
    
      我是p元素

8.3 font-family

设置文字字体名称
可以设置一个或多个，从左到右选择，直到找到操作系统支持的字体为止

案例




  
  Document
  


  sssssssssssssssssssssss中文中文中文中文中文中文中文中文中文中文中文

8.4 font-weight 设置文字的粗细

100|200|300...|900 每个数字表示一个重量
正常：normal 400
加粗：bold 700
strong、b、h1~h6等标签的font-weight默认就是bold

案例




  
  Document
  


  ￥21.99
    
  
  标题，默认加粗

8.5 font-style

noramal 常规显示
italic 用字体的斜体显示（前提是这种字体本身支持斜体）
oblique 文本倾斜显示
em、i、cite、address、var、dfn等元素的font-style默认就是italic
n设置font-style为italic的span元素，使用效果等价于em元素

案例




  
  Document
  


  
  
  哈哈哈哈哈哈哈
  呵呵呵呵呵呵呵呵呵呵呵呵

  
  嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻1
  嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻2

8.6 font-variant

影响小写字母的显示形式

案例




  
  Document
  


  
  Hello World！
  Hello World！

img

8.7 行高

line-height 设置文本的行高（一行文字所占的高度）
官方：两行文字基线（baseline）之间的间距
区分height 与 line-height
- height：元素的整体高度
- line-height：元素每一行文字所占据的高度

案例




  
  Document
  


  中文Englishxxxx

8.8 font 缩写

当需要对文本设置很多样式时使用

案例




  
  Document
  


  我是div内容