HTML&学习CSS小知识 - MrLee博客 - 一个伪全桟工程师的小站

MrLee博客

落子无悔,人生无返

HTML&学习CSS小知识

CSS小知识

回顾前期知识:
1.HTML&学习第一个页面:仿百度搜索页面
2.PHP&学习第一个问题:编程规范

前几期写过 HTML 但是并未具体的去写CSS
今天复习了一下CSS 顺带写了个博客
目录:

  1. 认识CSS
  2. 创建CSS样式表方法
  3. CSS属性语法
  4. CSS选择器与优先级

一、认识CSS:

  • CSS是层叠样式表(Cascading style sheets)
  • 定义了如何显示HTML
  • 可以解决结构与表现分离的问题
  • 多个样式层叠唯一

二、创建CSS样式表的方法:

页面使用CSS的四种方式:

外部导入:

@import

外部样式表:

在head标签中写入link标签

<head>
    <link rel="stylesheet" href="css/demo.css">
</head>

内部样式:

<head>
    <style>
        //CSS样式
       body {
            width:100%;
       }
    </style>
</head>

内联样式表:

<p style="background-color:#CE93D8;">Hello Word</p>

三、CSS属性语法:

CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明

h1 {                // h1是选择器
    color:red;        // color是属性 red是值
    font-size:14px; // font-size是属性 14px是值
}

选择器通常是你需要改变样式的HTML属性

每条声明由一个属性和一个值组成

每个属性有一个值,属性和值被英文下的冒号隔开 分号结束,必须写在大括号内。

列: color:red;  

可以在图内清楚看到 css设定的宽高在页面显示的效果

QQ图片20190801204711.png

四、CSS选择器与优先级:

认识了CSS之后,熟悉了语法结构,那么我深入学习一下选择器

选择器有哪几种?

  1. ID选择器
  2. 类(class)选择器
  3. tag 标签选择器
  4. 后代选择器
  5. 子元素选择器
  6. 分组选择器/通用选择器
  7. 相邻兄弟选择器
  8. 伪类/伪元素

我们一个一个进行了解

4-1:ID选择器

首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

请看下面的规则:

    #myID {
        width:200px;
        height: 100px;
        background-color: red;
    }

以下是一个实际 ID 选择器的例子

<div id="myID">我是ID选择器</div>

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-2:类(class)选择器

该选择器可以单独使用,也可以与其他元素结合使用。

请看下面的规则:

    .myClass {
        width:200px;
        height: 100px;
        background-color: pink;
    }

以下是一个实际 Class 类选择器的例子

<div class="myClass">我是类(class)选择器</div>

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-3:tag标签选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、span,甚至可以是 html 本身

请看下面的规则:

    div {
        width:200px;
        height: 100px;
        background-color: orange;
    }

以下是一个实际 Tag 标签选择器的例子

<div>我是标签选择器</div>

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-4:后代选择器

请看下面的规则:

    div span {
        color: orange;
    }

以下是一个实际 后代 选择器的例子

<div>
     <span>后代选择器</span>
</div>

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-5:子元素选择器

这个规则会把第一个 div 下面的 span元素变为橙色,但是第二个 div 中的 span 不受影响:

请看下面的规则:

   .myClass>span {
        color: orange;
    }

ID选择器也可以哦

以下是一个实际 子元素 选择器的例子

    <div class="myClass">
        <span>子元素选择器</span>
    </div>
    <div>
        <span>子元素选择器2</span>
    </div>

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-6:分组选择器/通用选择器

假设希望 span元素和h1 都有灰色。为达到这个目的,最容易的做法是使用以下声明

分组选择器 请看下面的规则:

   span,h1 {
        color: #ccc;
    }

ID选择器也可以哦

以下是一个实际 分组 选择器的例子

    <span>分组选择器</span>
    <p>我是p标签</p>
    <h1>我是标题标签</h1>

也可以重新单独的去写一个css

比如定义div背景颜色为黄色:

则可以使用标签选择器:

div {
    background-color:yellow;
}

通用选择器

选择html页面所有元素

实例:

<span>通用选择器</span>
<p>我是p标签</p>
<h1>我是标题标签</h1>

CSS:

* {
   font-size:25px;
   color:green;
}

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-7:相邻兄弟选择器

对紧邻、同辈、后面的元素设定样式

请看下面的规则:

   .myClass + span {
        color: orange;
    }

以下是一个实际 相邻兄弟 选择器的例子

    <div class="myClass">
        我是Div
    </div>
    <span>相邻兄弟选择器1</span>
    <span>相邻兄弟选择器2</span>
    <span>相邻兄弟选择器3</span>

运行代码你会发现 只有 相邻兄弟选择器1 会有变化

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


4-8:伪类选择器

请看下面的规则:

      .myClass {
             width:200px;
             height:200px;
             background-color: orange;
        }
//使用伪类  鼠标滑过时背景颜色变为红色
      .myClass:hover {
             background-color: red;
}

以下是一个实际 伪类 选择器的例子

    <div class="myClass">
        我是伪类Div
    </div>

也可以这样:

创建一个单选框

<input type="radio" checked/>

写CSS样式,当选中状态下是大小为50px

input:checked {
    width:50px;
    height:50px;
}

Tips:更多伪类知识

伪元素

实例:

<p>当你访问MrLee博客时,你已经学习到了一些知识。</p>

CSS:

p:first-letter {
    font-size:25px;
color:red;
}

Tips:更多伪元素知识

Tips:如果看到这里还不熟悉的话,请打开编辑器亲自试一试


纯文字说明可能不是很生动的表现,请读者自己要亲自去编辑器里面测试。

一个渣渣PHP自学者,写的贼鸡儿不规范的博客文。

本文共1305字

评论卡