前端网页学习 Day45（css引入方式 基本样式 css选择器

前端网页学习(html)

DAY45

今日内容:

css三种引入方式

长度及颜色单位

字体样式

文本样式

背景样式

css选择器

• css三种引入方式

---

• 行间式

  1. 在标签头部的style属性内
  2. 属性值满足的是css语法
  3. 属性值用key:value形式赋值,value具有单位
  4. 属性值之间 ; 隔开

  例:

• 内联式

  1. 在style标签内(style标签一般作为head的子标签)
  2. 属性值满足的是css语法
  3. 属性值用 key:value 形式赋值,value具有单位
  4. 属性值之间用 ; 隔开(一般独行分开赋值)
  5. 格式: 选择器{样式块}

  例:

• 外联式

  1. 在外部css文件
  2. 属性值满足的是css语法
  3. 属性值用key : value 形式赋值,value具有单位
  4. 属性值之间用 ; 隔开(一般独行分开赋值)
  5. 格式: 选择器{样式块}
  6. 将html与css文件建立联系:通过link标签链接外部css(一般在head中链接)

​ 例: <link rel=“stylesheet” type=“text/css” href=“1.css”

​ 1.css文件:

​ div{
​ width: 200px;
​ height: 200px;
​ background-color: brown;
​ }

css三种引入方式优先级

三种方式之间没有优先级

1. 三种方式协同布局
2. 不重复的属性一定唯一值
3. 重复的属性采用覆盖赋值,保留最后位置的属性值
4. 行间式一定是逻辑上最后被解析的位置
5. !important会影响优先级

---

• 长度及颜色单位

---

长度单位

px :像素,屏幕上显示最小单位,用于网页设计

in : 英寸

pt : 点,标准长度单位,1pt=1/72in

mm: 毫米

cm : 厘米

em : 相当长度, 通常 1em = 16px ,常用与流式布局

vw : viwe width

vh : viwe width

颜色单位

rgb() : 三个值可为[0-255]数值或百分比,以逗号分隔

rgba() : 前三个值可为像素或是百分比,最后一个为[0,1]数值设置透明度

hsl() : 第一个值为[0,360]数值,后两个值可为百分比, 用逗号分隔

hsla() : 第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以逗号相隔

#AABBCC : 留个十六进制位,每两位一个整体 ,分别代表Red, Green,Blue,可以简写为#abc

---

• 字体样式

---

font-size:100px; 字体大小

font_weight: 100; 字体重量 : bold mormal(默认) lighter 范围100~900

line-height: 200px; 字体行高:设置需要大于等于字体大小,字体在行高中垂直居中显示

font-style: normal; 字体样式

font-family: “楷体”, “黑体” ; 字体族科:多值用于备用,当楷体不存在,或不起作用,在选取黑体

font: lighter 50mm/50mm “楷体”; css语法: 空格隔开为多个值赋值,隔开为一个值多值赋值;

---

• 文本样式

---

color: red; 文本颜色

text-align: center; 横向排列

text-decoration: none; 字划线: underline line-through overline none

letter-spacing: 3px; 字间距

word-spacing: 10px; 词间距

word-break: break-all; 自动换行 normal默认换行规则 break-all 允许在单词内换行

text-indent : 2em; 缩进

---

• 背景样式

---

backgroud-color: red; 背景颜色

background-image: url(“image/01.gif”); 背景图片

backgroud-repeat: no-repeat 平铺:是否重复repeat | no-repeat | repeat-x | repeat-y

backgroud-position: 10px top; 定位:第一个值控制水平位置,第二个值控制垂直位置(默认center)

backgroud-attachment: fixed 滚动模式:定位相关的涉及到滚动时的效果(scroll 默认)

background: url(“image/01.gif”); 10px top no-repeat green ; 整体设置

---

• css选择器(基础选择器)

---

基础选择器

• 通配选择器(*): 匹配所有(html,body,body中的所有子标签)

  *{
  	border: solid;
  }
  

• 标签选择器(标签名):匹配指定标签名的对应的所有标签

  div{
      width: 100px;
      height: 100px;
      background-color: red;
  }
  section{
      width: 200px;
      height: 200px;
      background-color: yellow;
  }
  

• 类选择器(.): 匹配指定类名对应的所有标签

  .dd{
  	font-size: 50px;
  }
  

• id选择器(#): 指定id名对应的唯一标签

  #ele{
  	color:blue;
  }
  

总结:

通配选择器一般用于整体reset操作(清除系统自定义样式)

标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局

类选择器为布局首选(建议基本全用class选择器进行布局)

基本选择器优先级:id > class > 标签 > 通配

---

以上为本次学习内容