4C引用·选择器·伪类·css颜色·溢出·尺寸·倒角·边框阴影·图片边框·轮廓突出作用160515

CSS概述

CSS的作用

引入CSS的几种方式
1.标签内引用style:style="样式名:样式值;..."
2.内部引用在head标签下

CCS内部引用head.PNG

3. 外部引用

• 利用head元素下的link标签,利用href引入外部的css文件

  
  
  

  link引入外部CSS文件.PNG

• 外部的css文件为body元素下的标签加上样式

  
  
  

• 一个文本,后缀为 .css

  
  
  

  外部css的名称与后缀.PNG
• 文件中只能包含样式规则

• 样式规则由选择器和样式声明组成

  
  
  

  外部的css文件.PNG
• 根据标签名获取对应的标签,叫做选择器

样式的优先级

• 内部引用和外部引用优先级一致,靠先后决定样式,写在后面的生效.也就是就近优先

CSS样式表特征

继承性:应用于后代,子元素
！important 规则，强制改变优先级

通用选择器

类名选择器

元素选择器

ID选择器

id是唯一的,不能有id相同的标签

<#>井号

id选择器.PNG

类选择器

• 加上class的名称 获取对应的选择器
  .voo{font-size: 30px}
• class命名不能数字开头
• 元素选择器 .名称{}pt为字体的号数
• 标签名后面跟.名称{}

群组选择器

选择器声明以逗号隔开的选择器列表

• 将一些相同的规则作用于多个元素

后代选择器

div span {color:red;}

div span {color:blue;}
后代选择器,获取div里面的所有span
子代选择器,直系子代,和后代选择器优先级一致,谁靠的近渲染谁

子代选择器,直选亲系子代

伪类选择器

伪类选择器.PNG

link 尚未访问的链接,默认状态下（不显示默认时，清除缓存）
visited 访问过的链接.
hover 最常用,鼠标悬停时的样式.
active 鼠标按压时的样式.
focus 点上去就触发,光标点上去

伪类选择器focus属性.PNG

按照顺序,顺序不能颠倒
伪类选择器可以使用其他选择器去获取对应标签

CSS单位

颜色单位

• rgb();
  

  CSS颜色单位rgba.PNG
  rgba(); a 代表透明度

• 十六进制数
  #rrggbb 如#ff0000
rgb简写的十六进制数,如#f00
和颜色的英文单词

尺寸

• 宽度属性
  width
  max-width
  min-width

  
  
  

  p的id的最大最小宽度.PNG
• 高度属性
  height
  max-height
  min-height

溢出

• overflow:当内容溢出元素框时如何处理

visible 默认属性
hidden 表示溢出部分不显示
scroll 表示总是显示滚动条阅读
auto 也表示滚动阅读,内容多就有滚动条,内容足够显示就没有滚动条

溢出overflow.PNG

哪些HTML元素可以设置尺寸属性

• 可以设置宽高的标签为块标签,img,table.行标签设置宽高需要转化块标签

p
div
h1 h2 h2 h3 h4 h5 h6
ul ol li dl dt dd
img
table

结构化标签都是块标签

边框属性

• 简写方式

border:width style color;

边框样式:实线:solid 虚线:dotted

• 单边方式

  
  
  

  边框单边方式.PNG
• transparent 用于创建有宽度的不可见边框
  
  

  transparent 有宽度不可见边框.PNG

边框倒角

左上，右上，，顺时针

边框倒角的使用 可以设计角.PNG

边框倒角角度.PNG

边框阴影 box-shadow

box-shadow 向方框加一个或多个阴影
取值为多个属性值
box-shadow:h-shadow v-shadow blur spread color inset

边框阴影顺序用法.PNG

图片边框 border-image

border-image: source width repeat;

应用图片边框.PNG

也可以分开设置.PNG

图片边框(续1)

图片续一.PNG

轮廓，在边框外围，突出元素的作用

轮廓.PNG