CSS样式指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Danny1076376440/article/details/104773964

文章目录

学习网址
笔记

学习网址

https://www.w3school.com.cn/html5/html_5_audio.asp
https://www.runoob.com/html/html-tutorial.html

笔记

CSS 文本格式

文本颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

文本的对齐方式

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰
text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

CSS 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

CSS 盒子模型

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

CSS 边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

border-style属性用来定义边框的样式
border-width属性设置边框宽度
border-color属性用于设置边框的颜色

在CSS中，可以指定不同的侧面不同的边框
	border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;

CSS分组和嵌套选择器

分组选择器
每个选择器用逗号分隔。
h1,h2,p
{
    color:green;
}

嵌套选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

*CSS Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
但是请注意，这两种方法会产生不同的结果。
Tip:visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：
<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：
<span>
<a>

下面的示例把列表项显示为内联元素：
li {display:inline;}
下面的示例把span元素作为块元素：
span {display:block;}

*CSS Position(定位)

static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
*fixed 定位
元素的位置相对于浏览器窗口是固定位置。
relative 定位
相对定位元素的定位是相对其正常位置。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
(导航栏的粘性定位)
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

CSS 布局 - 水平 & 垂直对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

CSS——笔记二

文章目录

学习网址

笔记

CSS 文本格式

CSS 链接

CSS 盒子模型

CSS 边框

CSS分组和嵌套选择器

*CSS Display(显示) 与 Visibility（可见性）

*CSS Position(定位)

CSS 布局 - 水平 & 垂直对齐

CSS 组合选择符