CSS（Cascading Style Sheets）基本样式

css简介

1.什么是css

• 重叠样式表，主要是负责标签的样式，美化页面
• 一个网页分三大部分：
  • 结构层：主要由HTML负责，负责页面的结构
  • 表现层：主要由css负责，页面的展示样式，美化效果
  • 行为层：主要由js负责，负责页面和用户的交互效果
  • css是单独的一种文件类型，后缀为.css的文件
  • css语法格式：
    

2.css的三种引入方式

• 行间样式
  • 给标签添加style属性，值就是你要设置的css样式
• 嵌入式
  • 将css代码写在head标签内的style标签内
• 外链式
  • 在head标签内通过link标签的href属性引入外部css文件

3.css选择器

• 用来选取要设置的HTML标签
• 标签选择器
  • 通过标签名来查找元素
  • 选择符：标签名
  • 影响范围最大，一般很少单独使用
• id选择器
  • 通过标签的id属性的值来获取元素
  • 选择符：#
  • id属性的值不能重复，一个id值在一个html文件中只能出现一次，影响范围最小
• class选择器
  • 通过元素的class属性的值来获取元素
  • 选择符：.
  • 一个标签的class属性可以有多个值
  • 一个class属性的值可以被多个标签去使用
  • 影响范围介于id选择器和标签选择器之间

4.引入方式的css优先级

• 嵌入式
• 外链式
• 行间样式
• 问题：当使用以上三种方式对一个标签设置样式时，思考到底哪个生效
• 谁靠近元素越近 谁生效

5.三种基本选择器的优先级

• 标签选择器<类选择器<id选择器
• 谁的影响范围大谁的优先级就小

6.关系选择器

• 后代选择器：选择符： 空格

  • 选择指定标签内的 所有符合要求的标签 忽略层级关系

• 子元素选择器：选择符：>

  • 只获取指定元素的直接子元素

• 并集选择器（组选择器/并列选择器）：
  选择符： ,

  • 一次性给多个元素设置相同的样式

• 伪类选择器：：hover

  • 当鼠标移入指定元素时，修改当前元素的样式

• 伪元素选择器：

  • After 在指定元素内部的后面插入指定的内容
  • Before 在指定元素的内部前面插入指定的内容
  • 以上两个选择器要配合content使用

css常用的属性

1.css颜色的表示方式

• 直接使用单词来表示
• 十六进制表示方式，取值范围0-9，A-f
  • 一共有六位十六进制数 来表示最终显示的颜色
  • 每两个数为一组 分别代表 红 绿 蓝
• 十进制数表示方式
  • 由三个进制的数字 来表示最终的显示颜色
• 0-255，rgb(红色,绿色,蓝色)
• 带透明度的颜色表示
  • Rgba(红色,绿色,蓝色,透明度)
    • 0-1之间的小数

2.背景属性

• background-color 背景颜色
• background-imae 背景图片
• background-position 背景位置
• background-repeat 设置不要重复图片

3.字体属性

• color 颜色
• font-size 大小
  • 浏览器的默认字体大小是16px
  • 谷歌浏览器最小只能设置到12px
• font-weight 是否加粗 bold/700
• font-family 字体类型
  • 如果用户电脑没有指定的字体会使用默认字体显示
  • font-family:宋体,楷体; 如果第一个字体不存在会去使用第二个字体
  • font-family: ‘Angsana New’; 如果字体的名字中有空格需要加引号
• font-style 是否倾斜
  • nomal 不倾斜
  • italic 倾斜

4.边框属性

• border-top:
• border-left:
• border-right:
• border-bottom:
• 边框的颜色 边框的样式 边框粗细
• 边框样式：solid实线 dotted点状线 dashed虚线 double 双实线

5.内间距

• 设置元素边界距离内部内容之间的间距
• 会改变元素的实际大小
• padding-top:20px;
• padding-left:20px;
• padding-right:20px;
• padding-bottom:20px;
• 简写
  • 如果只给一个值代表四边的间距
  • 如果是四个值 从上开始 依次顺时针旋转 每个值代表一个边
  • 如果三个值 第一个值是上 第二个值是左右 第三个值是下
  • 如果是两个值 第一个值是上下 第二个值是左右的

	padding:50px;
   	padding:10px 20px 30px 40px;
    padding:10px 20px 30px;
    padding:20px 50px;

6.外间距

• 设置元素距离四周外部元素之间的间距 margin:
• margin的使用和padding是一样的可以单独指定方向设置
• 还可以不指定方向一次设置多个值
• 一般情况下 我们用margin来去实现块元素的 水平居中

7.盒子模型

• 使用现实中的盒子来描述页面中的元素的 属性
  • 盒子的实际宽度=width+左border+右border+左padding+右padding
  • 盒子的实际高度=height+上border+下border+上padding+下padding
• box-sizing:border-box 让盒子大小=css样式的实际大小