前端-02 CSS基础

1 简介

1.1 CSS语法

  1. 语法
    前端-02 CSS基础_第1张图片

选择器:HTML元素

生命块:用;隔开的各种声明 {a;b}

每条声明有CSS属性名称和值,用冒号分割{属性:值;属性:值}

  1. 案例
  • 整块代码
DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: lightblue;
        }

        h1 {
            color: white;
            text-align: center;
        }

        p {
            font-family: verdana;
            font-size: 20px;
        }
    style>
head>



<body>

    <h1>我的第一个 CSS 实例h1>
    <p>这是一个段落。p>

body>


html>
  • 效果
    前端-02 CSS基础_第2张图片

  • 部分代码

p {
  color: red;
  text-align: center;
}

p是选择器

color 是属性,red是属性值

align也是属性,center也是属性值

1.2 CSS 选择器

  1. css 元素选择器
  • 概念:选择器根据元素名称来选择HTML元素

  • 实例:是对页面上的所有p元素居中对齐、红色文本

p {
  text-align: center;
  color: red;
}
  1. css id 选择器
  • 概念:根据HTML的元素的id属性来选择特定元素,id是唯一的

  • 实例:**id=“para1”**的HMTL元素

#para1 {
  text-align: center;
  color: red;
}
  1. css类选择器
  • 概念:选择有特定class属性的HTML元素,写法是.class
  • 实例:带有 class=“center” 的 HTML 元素
.center {
  text-align: center;
  color: red;
}
  1. css通用选择器
  • 概念:选择页面上的所有的 HTML 元素,写法(*)
  • 实例:
* {
  text-align: center;
  color: blue;
}
  1. css分组选择器
  • 概念:选取所有具有相同样式定义的 HTML 元素
  • 实例
h1, h2, p {
  text-align: center;
  color: red;
}
  1. 总结
    前端-02 CSS基础_第3张图片

1.3 CSS的使用

  1. 外部css
  • 概念:只需修改一个文件
  • 实例:外部样式在 HTML 页面 部分内的 元素中进行定义




    "stylesheet" type="text/css" href="mystyle.css">




    

This is a heading

This is a paragraph.

  1. 内部css
  • 概念:如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表

  • 实例:在 HTML 页面的 部分内的





    




    

This is a heading

This is a paragraph.

  1. 行内css
  • 概念:为单个元素应用唯一的样式,对单个元素
  • 实例:相关元素的”style“





    

"color:blue;text-align:center;">This is a heading

"color:red;">This is a paragraph.

  1. 多个样式表
  • 如果内部样式是在链接到外部样式表之后定义的,走的后面内部,h1是橙色

    
    

前端-02 CSS基础_第4张图片

  • 如果在链接到外部样式表之前定义了内部样式,走的后面内部,h1是深蓝色

    
    "stylesheet" type="text/css" href="mystyle.css">

前端-02 CSS基础_第5张图片

  1. 层叠顺序规则

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表,其中第一优先级最高:

  1. 行内样式(在 HTML 元素中)
  2. 外部和内部样式表(在 head 部分)
  3. 浏览器默认样式

1.4 CSS的注释

  1. 注释符号
/* 这是一条单行注释 */
  1. 实例
p {
  color: red;  /* 把文本设置为红色 */
}
  1. HTML的注释

2 颜色

2.1 概述

  1. 颜色名称
  • 分类

Tomato、Orange、DodgerBlue、MediumSeaGreen、Gray

  • 实例

"background-color:Tomato;">番茄色

"background-color:Orange;">橙色

  1. 背景色
  • 使用:background-color

  • 实例

"background-color:DodgerBlue;">China

"background-color:Tomato;">China is a great country!

  1. 文本颜色
  • 使用:color
  • 实例

"color:Tomato;">China

"color:DodgerBlue;">China is a great country!

"color:MediumSeaGreen;">China, officially the People's Republic of China...

  1. 边框颜色
  • 使用:border
  • 实例

"border:2px solid Tomato;">Hello World

"border:2px solid DodgerBlue;">Hello World

"border:2px solid Violet;">Hello World

  1. 颜色值
  • 使用:RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值
  • 实例

"background-color:rgb(255, 99, 71);">...

"background-color:#ff6347;">...

"background-color:hsl(9, 100%, 64%);">...

"background-color:rgba(255, 99, 71, 0.5);">...

"background-color:hsla(9, 100%, 64%, 0.5);">...

前端-02 CSS基础_第6张图片

2.2 RGB颜色

  1. 语法
rgb(red, green, blue)
  1. 实例
rgb(255, 0, 0) 显示为红色
rgb(255, 0, 0) 显示为黑色
rgb(255, 0, 0) 显示为白色
  1. RGBA值
  • 语法

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

rgba(red, green, blue, alpha)

2.3 HEX颜色

  1. 语法
#rrggbb

其中rrggbb是介于00到ff之间的十六进制值,没看懂

2.4 HSL颜色

  1. 语法
hsla(hue, saturation, lightness)

色相(hue)是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。

饱和度(saturation)是一个百分比值,0% 表示灰色阴影,而 100% 是全色。

亮度(lightness)也是百分比,0% 是黑色,50% 是既不明也不暗,100%是白色。

  1. HSLA值
hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字

3 背景

3.1 概述

  1. 学习内容
background-color
background-image
background-repeat
background-attachment
background-position
  1. background-color
  • 概念: 属性指定元素的背景色
  • 实例
body {
  background-color: lightblue;
}
  • 不透明度

使用opacity

div {
  background-color: green;
  opacity: 0.3;
}

使用rgba的alpha透明值

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

你可能感兴趣的:(css,前端,html)