学习CSS的简单总结(2)

简介: 在"学习CSS的简单总结(1)" 里总结了怎样使用css。本文是总结一下具体的使用。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。最常见的 CSS 选择器是元素选择器。

本文目录

@[TOC]

前言

在"学习CSS的简单总结(1)" 里总结了怎样使用css。
本文是总结一下具体的使用。

1.选择器

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
在这里插入图片描述

元素选择器

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

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

p{
    color: red;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>case</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
    <p>
        元素选择器
    </p>
    <p>
        所有的p标签都会被应用
    </p>
</body>
</html>

结果图:
在这里插入图片描述
此举动是将所有p标签的文字设置为红色。

class选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.)

.important1 {
    color:rgb(106, 0, 255);
    font-size: 36px;
}
.important2 {
    color:rgb(0, 255, 166);
    font-size: 66px;
}

在html中使用``class="important1"
``

<div class="important1">
        类选择器
    </div>
    <div class="important2">
        设定为class=***
    </div>

结果图:
在这里插入图片描述

id选择器

在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。

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

#intro {font-weight:bold;}
<div id="intro">
      id选择器  
</div>

结果图:
在这里插入图片描述

选择器分组

可以将任意多个选择器分组在一起,对此没有任何限制。

例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则:
body, h2, p, table, th, td, pre, strong, em {color:gray;}

2.关键字

背景

background :简写属性,作用是将背景属性设置在一个声明中。
background-attachment :背景图像是否固定或者随着页面的其余部分滚动。
background-color :设置元素的背景颜色。
background-image :把图像设置为背景。
background-position :设置背景图像的起始位置。
background-repeat :设置背景图像是否及如何重复。

文本

color :设置文本颜色
direction :设置文本方向。
line-height :设置行高。
letter-spacing :设置字符间距。
text-align :对齐元素中的文本。
text-decoration :向文本添加修饰。
text-indent :缩进元素中文本的首行。
text-shadow :设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform :控制元素中的字母。
unicode-bidi :设置文本方向。
white-space :设置元素中空白的处理方式。
word-spacing :设置字间距。

字体

font :简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family :设置字体系列。
font-size :设置字体的尺寸。
font-size-adjust :当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch: 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style :设置字体风格。
font-variant :以小型大写字体或者正常字体显示文本。
font-weight :设置字体的粗细。

列表

list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image:将图象设置为列表项标志。
list-style-position:设置列表中列表项标志的位置。
list-style-type :设置列表项标志的类型。

边距

element : 元素。
padding : 内边距。
border : 边框。
margin : 外边距。

3.小结

关于css理解起来有一些抽象。
如果想要真正的理解,还是得自己手动敲一敲代码,这个代码的学习就着这样,如果只是单纯的看书、看资料,会产生一些错误的想法。就是思想跟上了动手能力却跟不上。
还有一些关键字的细节,基本都是英文单词的意思,想不起来了不用使劲背,多敲两遍自然就有印象了。

相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
151 0
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
117 1
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
46 3
|
2月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
63 5
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
59 2
|
2月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
67 0
|
2月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。
68 0
|
5月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
5月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。