HTML5+CSS3学习笔记第三天

三、CSS 第一天（基础选择器、文字控制属性）

1.CSS定义：层叠样式表

• 在style标签中书写
• 书写规则：选择器 {属性名：属性值;}

2.CSS引入方式：

• 内部样式表：直接在html中写，title标签下方，head标签里面

  <style>
        p{
            font-size: 30px;
       }
  </style>
  

• 外部样式表：

  • CSS代码写在单独CSS文件中（.css）

  • 在HTML使用link标签引入

    <link rel="stylesheet" href="./my.css">
    

• 行内样式：配合JavaScript使用

  • CSS写在标签的style属性中：

     <div style="color:brown; font-size: large;">这是div标签</div>
    

3.选择器

• 标签选择器：使用标签名作为选择器（eg：p、h1、div、a）——无法差异化同名标签的效果

• 类选择器：

  • 定义类选择器：. 类名

  • 使用类选择器：标签添加 class=“类名”——一个类选择器可以给多个标签使用

    ​ 一个标签可以使用多个类名 用空格隔开

• id选择器：很少用来设置css样式

  • 定义id选择器：#id名
  • 使用id选择器：标签添加id=“id名”——同一个id选择器在一个页面只能用一次

• 通配符选择器：查找页面所有标签，设置相同样式——*****

4.文字控制属性

描述	属性	效果
字体大小	font-size	显示文字不同大小
字体粗细	font-weight	文字&文字
字体倾斜	font-style	文字&文字
行高	line-height	文字 文字
字体族	font-family	文字字体
字体复合属性	font	复合属性
文本缩进	text-indent	你好呀！
文本对齐	text-align	对齐方式
修饰线	text-decoration	下划线|删除线|上划线
颜色	color	显示文字不同颜色

• font复合属性：是够倾斜、是否加粗、字号/行高、字体（必须写字号和字体否则不生效）
• 文本缩进：text-indent: 数字+px、em(一般用这个)