cc第二周-HTML标签+CSS基础

以下内容将包括：

HTML常用标签 CSS基础(CSS发展历史、作用、引用方式、三大特性、常用属性。

目录

一、HTML常用标签

head标签

body标签

列表

表格

表单

HTML文本格式化标签

CSS（Cascading Style Sheets）

一、CSS发展历史

二、CSS的作用

三、CSS的引用方式

四、CSS的三大特性

五、CSS常用属性

---

一、HTML常用标签

• ：定义HTML文档的根元素。

hi 这是cc的博客内容

head标签

• ：包含了页面的元信息，如标题、字符编码、关键字、描述等等。此外， 还可以引用外部文件，如CSS样式表和JavaScript脚本。

•        

  这是一个标题

     

  这是一段文本。

  2. 外部样式表（外联式）

      外部样式表是一种将CSS样式存储在独立文件中的方式。通过在HTML文件中引用外部样式表，可以实现多个页面共享相同的样式，同时也方便管理和维护。 创建外部样式表需要先新建一个以.css为后缀名的文件，在该文件中编写CSS样式，然后在HTML文件中使用标签引用该样式表。

   
   
   
       
       
   
   
      
  这是一个标题
   
      
  这是一段文本。
   
   
  

  3. 行内样式表（行内式）

  行内样式表是一种将CSS样式直接应用到HTML标签中的方式。它通常不建议使用，因为它会增加HTML文件的复杂度，并且难以维护。

   
   
   
           
   
   
          
  这是一个标题
   
          
  这是一段文本。
   
   
   

  四、CSS的三大特性

  CSS具有三大特性：层叠性、继承性和优先级。

   1. 层叠性 层叠性指的是CSS样式在页面上的叠加顺序。

  当多个样式作用于同一个元素时，浏览器会按照一定的规则将它们叠加在一起形成最终样式效果。

  css /* 外部样式表 */ 
  h1 { 
    color: red; 
  } 
  h1 { 
    color: blue; 
  } 

   h1元素最终的颜色为蓝色，因为后来的覆盖了之前的样式。可以有效地避免样式冲突和混乱。

  2. 继承性 继承性指的是某些CSS属性的值可以被它们的子元素继承。

  如果给body元素设置了字体大小和颜色，那么该页面中的所有文本元素都会继承这些属性。

  css /* 外部样式表 */ 
  body { 
      font-size: 14px; color: #333;
   }

   在上面的例子中，h1、p等标签的字体大小和颜色都会继承body元素的属性。

  3. 优先级 优先级指的是当多个CSS样式作用于同一个元素时，浏览器根据一定的规则来判断哪个样式具有更高的优先级。

  通常，优先级从高到低分别为：行内样式 > ID选择器 > 类选择器和属性选择器 > 标签选择器和伪类选择器 > 通配符选择器和继承的样式。

  例如：

  css /* 外部样式表 */ 
      h1 { 
      color: red; /* 普通标签选择器 */ 
  } 
      #header h1 { 
         color: green; /* ID选择器 */ 
  } 
      .header h1 { 
         color: blue; /* 类选择器 */ 
  } 

   在上面的例子中，ID选择器的优先级最高，所以

  元素的颜色将为绿色。

  五、CSS常用属性

   1. 背景相关

  - background-color：背景颜色。 - background-image：背景图片。

  - background-repeat：背景图像的重复方式。 - background-position：背景图像的位置。

  2. 盒子模型相关

  - width：元素宽度。 - height：元素高度。

  - padding：内边距。 - margin：外边距。 - border：边框。

  3. 字体相关

  - font-family：字体类型。 - font-size：字体大小。

  - font-weight：字体加粗程度。 - color：文字颜色。

  4. 文本相关

  - text-align：文本对齐方式。-line-height：行高。

  - text-decoration：文本装饰效果（如下划线、删除线等）。

  5. 定位相关

  - position：定位方式。 - top、left、right、bottom：定位距离。

  以上内容就是cc第二周的预习博客 不足请指出 会马上改正！