CSS学习笔记(未完结)

最新推荐文章于 2024-09-24 12:57:22 发布

尘世猫

最新推荐文章于 2024-09-24 12:57:22 发布

阅读量113

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42838061/article/details/104227070

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简介

CSS是层叠样式表(Cascading Style Sheets)的简称，有时我们也称之为CSS样式表或级联样式表
CSS的主要使用场景就是设置HTML页面中的文本内容(颜色、大小等)、图片外形以及HTML页面布局和外观显示样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 选择器{样式} */
        p{
            color:red;
            /* 修改文本大小为12像素(px表示像素) */
            font-size: 12px;
        }
    </style>  
</head>
<body> 
</body>
</html>

CSS语法规范

主要的部分构成：选择器和一条或多条声明

选择器是用于指定CSS样式和HTML标签，花括号内是对象设置的具体样式
属性和属性值以"键值对"形式出现
属性和属性值之间用:分开
多个键值对用;进行区分

CSS选择器

选择器分为基础选择器和复合选择器两大类

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

选择页面中所有的某一类标签

标签名 {
    属性1：属性值1;
    属性2：属性值2;
}

类选择器

一个标签可以指定多个类名，从而达到更多选择的目的，

.类名{
    属性1：属性值1;
    ....
}
/*调用时，类名间空格隔开*/
<div class='类名1 类名2'>文本</div>

id选择器

类似类选择器，以#开头

#id名{
    属性1：属性值1;
    ....
}
/*只能调用一次，调用完，其它的标签就调用不了了*/
/* 调用时，类名间空格隔开*/
<div id="id名">文本</div>

通配符选择器

以*开头，改变所有的标签，不需要调用

并集选择器：以`,`分隔开，改变有被选择的标签

ul,div {样式声明}

分组选择器

在样式表中有很多具有相同样式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}
/* 可以写成如下样子 */
h1,h2,p
{
    color:green;
}

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

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

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

伪类选择器

用于向某些选择器添加特殊的效果，用:表示

a:link /*选择所有未被访问的连接*/
a:visited /*选择所有已访问链接*/
a:hove /*选择鼠标指针位于其上的链接*/
a:acitve /*选择活动连接(鼠标按下未弹起)*/

:focus伪类选择器

用于选择获得光标的表单元素

input:focus {
    background-color:yellow;
}

字体属性

字体系列：div {font-family:"微软雅黑";}
字体大小：p {font-size:20px;}
字体加粗：p {font-weight:bold}
文字样式：p {font-style:italic;}(文字倾斜)

复合属性：顺序不能颠倒！不需要的可以省略，必须保留font-size、font-family属性否则会不起作用

div {font: font-style font-weight font-size/line-height font-family;}

文本属性

文本颜色：div {color: red;}
对齐文本：div {text-align:center;}(居中对齐)
装饰文本：添加下划线、删除线等div {text-decoration: underline;}
文本缩进：p {text-indent:2em;}
行间距：p {line-height:26px;}

CSS的三种样式表：

行内式：是在元素表内部的style属性中设定CSS样式。
例如：<div style="color:red;font-size=12px"> 文本</div>
嵌入式：写到html页面内部，是将CSS代码抽取出来，单独放到一个<style>标签中。一般放在<head>里面
链接式:单独建立CSS文件，在HTML页面中使用标签引入这个文件
例如：<link rel="stylesheet" href="css文件路径">

Emmet语法

快速生成HTML结构语法

生成标签直接输入标签名按tab键即可生成标签；
多个标签，例如div*3;
父子级标签，可以用ul>li按tab键；
兄弟关系标签，可以用div+p按tab键；
如果生成的标签带有类名或者id名字，直接写.demo或者#two tab键就可以了；
如果想要在生成的标签内部写内容可以用{}表示。

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

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

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

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

 h1.hidden {visibility:hidden;}
/*visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。*/

h1.hidden {display:none;}
/* display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。*/

定位Position

static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

relative定位

相对定位元素的定位是相对其正常位置。

2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

absolute定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}