前端秘法基础式(CSS)(第一卷)

一.认识CSS

CSS 指的是层叠样式表（Cascading Style Sheets），它是一种用于描述网页外观和布局的语法

CSS 可以定义网页中元素的字体、颜色、大小、位置、背景等样式，使网页具有美观的外观和统

一的风格。

通过将 CSS 样式表与 HTML 文档关联起来，可以实现对网页样式的控制和管理。CSS 的优点

在于它可以实现网页样式的分离，使得 HTML 主要负责网页的结构和内容，而 CSS 则专注于样式

定义，提高了代码的复用性和维护性。 

例如，以下是一个简单的 CSS 规则：

p {

  color: red;

  font-size: 16px;

}

上述规则将使所有 

 标签中的文本颜色变为红色，字体大小为 16 像素。通过这种方式，可以

方便地为整个网站或特定页面应用一致的样式。

CSS 还支持各种选择器，如类选择器、ID 选择器、元素选择器等，以便更精确地定位和样式化特

定的 HTML 元素。同时，CSS 还提供了一些高级特性，如媒体查询，可以根据不同的设备或屏幕

尺寸应用不同的样式。

     
 行也思君,  坐也思君 

二.CSS引入方式

1.内部样式表

写到style标签中,嵌入html内部

优点:可以使样式和页面结构分离

缺点:分离的不够彻底

引入方式参考上文

2.行内样式表

通过style属性来指定某个标签的样式,只适用于简单的设计,且优先级较高会覆盖其他的样式

 
 行也思君,  坐也思君 

3.外部样式

实际开发中最常用的样式,单独写一个.css文件,通过link链接

三.CSS选择器的种类

以下内容只是CSS2标准中支持的选择器

1.基础选择器(单个选择器构成的)

• 标签选择器
• 类选择器
• id选择器
• 通配符选择器

  1.1类选择器

  通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择

   行也思君,  坐也思君
  .poem{
      color:black;
      font-size: 20px;
  }
  

  1.2id选择器

   行也思君,  坐也思君 
  #poem{
      color:black;
      font-size: 20px;
  }

  1.3通配符选择器

  在实际应用开发中用来针对页面中所有元素默认样式进行消除,主要用来消除边距

  *{
      background-color: beige;
  }

  2.复合选择器(把多种选择器综合运用起来)

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

    2.1后代选择器

    又叫包含选择器,选择某个父元素中的某个子元素

    父级元素 子级元素{

            .....

    }

    只影响被选择的子级元素

    2.2伪类选择器

    链接伪类选择器

    a:link选择未被访问过的链接

    a:visited选择已被访问过的链接

    a:hover选择鼠标指针悬停上的链接

    a:active选择活动链接(鼠标按下但未弹起)

    a换成input也可以哦

    具体可以参考w3c官方文档