web前端 | CSS | 基础

最新推荐文章于 2024-07-18 17:34:14 发布

_Diamond

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量83

点赞数

分类专栏： web前端开发文章标签： css html

本文链接：https://blog.csdn.net/qq_45337960/article/details/117654088

版权

web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。

CSS的使用

位置：<head>…</head>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

    </style>
</head>
<body>
    
</body>
</html>

注释

/*我是注释信息*/

选择器

简单选择器：根据名称、id、类来选取元素

1、id选择器：#id名

！！！id 名称不能以数字开头

/*①要为HTML设置一个id*/
<p id="para1">Hello World!</p>

/*②开始写id选择器*/
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>

2、类选择器

！！！class名称不能以数字开头

①所有含有类属性的HTML：. 类名

/*①HTML中设置了类属性*/
<h1 class="center">居中的红色标题</h1>

/*②类名选择器*/
<style>
.center {
  text-align: center;
  color: red;
}
</style>

②特定的HTML：x . 类名

/*①HTML中设置了类属性*/
<h1 class="center">居中的红色标题</h1>

/*②类名选择器*/
<style>
h1.center {
  text-align: center;
  color: red;
}
</style>

3、通用选择器(影响每个HTML属性)：*

* {
  text-align: center;
  color: blue;
}

4、分组选择器：x1,x2,x3…

组合器选择器：根据它们之间的特定关系来选取元素
伪类选择器：根据特定状态选取元素
伪元素选择器：选取元素的一部分并设置其样式
属性选择器：根据属性或属性值来选取元素

属性

文本

颜色：color

对齐方式：text-align

装饰：text-decoration

删除线：line-through

下划线：underline

……

大小：font-size

背景

颜色：background-color

图像：background-image:url( )

图像重复：background-repeat : repeat-x / no-repeat

图形位置：background-position : right top / center / …

图形附着：background-attachment: fixed / scroll

边框

简写属性：border : width style color

边框宽度：width

边框高度：height

边框粗细：border-width

边框颜色：border-color

外边距：margin : top / right / bottom / left / auto(居中)

内边距：padding : top / right / bottom / left

边框类型：border-style （设置单边：border-left/top/bottom/right-style）

点线：dotted

虚线：dashed

实线：solid

双边框：double

无边框：none

……

边框的圆角程度：border-radius

浮动——float

多应用于网页菜单

默认值：none

元素向左浮动：left

元素向右浮动：right

定位——position

静止定位(默认值)：static

相对定位：relative

相对定位特点：
1、当元素开启相对定位后，如果不设置偏移量，元素不会有任何变化。

*偏移量：元素与参照物上下左右的偏移距离

2、开启了相对定位的元素参照元素自身在文档流的位置进行偏移.

垂直：top/bottom

水平：left/right

绝对定位：absolute

绝对定位特点：

1、当给元素开启绝对定位时，没有设置偏移量，元素不会有任何变化；

2、当元素设置绝对定位后，元素会脱离文档流，不占用文档流；

3、如果当前元素没有祖先元素，就参照于根元素进行定位，如果当前元素有祖先元素，就参照于最近一个开启定位的祖先元素。

_Diamond

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端 | CSS | 基础

CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。注释 /**/
复制链接

扫一扫

专栏目录

web前端 | CSS | 基础

CSS的使用

注释

选择器

属性

“相关推荐”对你有帮助么？