HTML5+CSS笔记

23.CSS初体验

• CSS：层叠样式表。一种样式表语言，用来描述HTML文档的呈现（美化内容）。
• 直接写在HTML里面，书写位置：title标签下方添加style双标签，style双标签里面书写CSS代码
• 选择器：{属性名：属性值;}
  • font-size：调整字号
  • color：调整文字颜色

• 属性名与属性值成对出现→键值对

24.CSS引入方式

• 内部样式表：学习使用
  • 把CSS写在style里面
• 外部样式表：开发使用
  • CSS代码写在单独的CSS文件中（.css)
  • 在HTML使用link标签引入
    • <link rel=”stylesheet” href=”地址”>
    • link写在title底下
• 行内样式表：配合JAVA使用
• CSS写在标签的style里面
• <div style=”xxx”>文字</div>

25.选择器

• 作用：查找标签，设置样式

• 基础选择器：

• 标签选择器

  • 以标签名命名的选择器→选中同名标签设置相同的样式
  • 一旦改变，则所有该标签下的内容都改变，无法差异化同名标签的样式

• 类选择器

  • 查找标签，差异化设置标签的展示效果
  • 步骤：定义类选择器→.类名（尽量不用中文）；使用类选择器→标签添加class=”类名“（这个类名不带.）
  • 一个类选择器可以给多个标签使用
  • 一个标签不允许加多个class属性
  • 要用多个选择器：class=”选择器1 选择器2“
  • 开发习惯：类名见名知义，多个单词连用可用-链接

• id选择器

  • 查找标签，差异化设置标签的显示效果
  • 场景：id选择器一般配合JAVA使用，很少用来设置CSS样式
  • 同一个id选择器在一个页面只能使用一次
  • 步骤：定义id选择器→#id名
    • 使用id选择器→标签添加id=”id名”（不加.)

• 通配符选择器

  • 查找页面所有标签，设置相同样式
  • 通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相关样式
  • 制作网页初期使用

26.画盒子

• 目的：使用合适的选择器画盒子（类选择器）
• 新属性：width 宽度
• height 高度
• background-color 背景色

27.文字控制属性

• 字体大小：font-size
  • 属性值：文字尺寸，PC端网页最常用单位px（像素）【必须要有单位，否则属性不生效】

• 字体粗细：font-weight

  • 属性值：数字（开发使用）：正常 400；加粗 700
  • 关键字：正常：normal ；加粗：bold

• 字体倾斜：font-style

  • 作用：清除文字默认的倾斜效果
  • 属性：正常（不倾斜）：normal
  • 倾斜：italic

• 行高：line-height

  • 设置多行文本的间距
  • 属性值：数字+px
  • 数字（当前标签font-size属性值的倍数）
  • 行高组成：文字高度+上间距+下间距
  • 行高测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）
  • 行高：垂直居中
    • 技巧：行高属性值等于盒子高度属性值

• 字体族：font-family

  • 属性名：字体名
  • 字体名之间用，隔开，执行顺序是从左向右依次查找
  • font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体（sans-serif）

• 字体复合属性：font复合属性
  • 使用场景：设置网页公共样式（不一样的单独设置）
  • 复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性之间用空格隔开。
  • font：是否倾斜 是否加粗 字号/行高 字体（必须按照顺序书写）
  • 注意：字号和字体值必须书写，否则font属性不生效
• 文本缩进：属性名：text-indent
  • 属性值：数字+px
  • 数字+em（推荐：1em=当前标签的字号大小）【常用】

• 文本对齐：text-align（本质是控制内容的对齐方式，属性要设置给内容的父级）

  • 作用：控制内容水平对齐方式
  • 属性值：left 左对齐（默认）
  • center 居中对齐【常用】
  • right 右对齐
  • 水平对齐方式：图片

• 文本修饰线：属性名：text-decoration

  • 属性值：none 无（常用）；underline 下划线（常用）；line-through 删除线； overline 上划线

• 文字颜色：color

• 属性值：颜色关键词 颜色英文单词 学习测试

• rgb表示法 rgb(r,g,b) r,g,b表示红绿蓝三原色，取值：0-255 了解

• rgba表示法 rgba(r,g,b,a) a表示不透明度，取值：0-1 开发使用，实现透明色

• 十六进制表示法 #RRGGBB（1，2为红色值，3，4为绿色值，5，6为蓝色值）简写（同一颜色两数一样时）：（#000000） #000，（#ffcc00)#fc0 开发使用（设计稿复制）

28.调试工具

• 作用：检查，调试代码：帮助程序员发现代码问题，解决问题
• 步骤：打开调试工具：浏览器窗口内任意位置/选中标签→鼠标右键→检查
  • F12
• 若为错误的属性，有黄色叹号
• CSS属性的前面有多选框，若勾选，这个属性生效；反之，属性不生效

综合案例一

• 网页制作思路：1.从上到下，先整体再局部
• 2.先标签，再CSS美化
• 在加粗方面：若要强调，则用HTML