笔记：css基础

最新推荐文章于 2024-05-21 14:15:14 发布

一只小bug。

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量282

点赞数

分类专栏： css html 前端文章标签： javascript node.js css3

本文链接：https://blog.csdn.net/weixin_48554465/article/details/123908859

版权

前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

css = 选择器 + {一条或多条声明（属性 + 值）};
css注释：/* */

选择器：id选择器和class选择器

// id选择器
#para{
	text-align: center;
	color: red
}
// 指定所有p元素使用class="center"让该元素文本居中
p.center{
	text-align: center
}

插入样式表：
- 外部样式表
- 内部样式表
- 内联样式： <p style="color:sienna;margin-left:20px">这是一个段落。</p>

背景：

background-color:	h1 {background-color:#6495ed;}
background-image: body {background-image:url('bgdesert.jpg');}
background-repeat:	background-repeat:no-repeat; //不平铺 
background-attachment: 背景图像是否固定或者随着页面的其余部分滚动。
background-position: 设置背景图像的起始位置。

文本：

color：设置文本颜色
text-align：center：文字水平对齐方式
vertical-align：设置元素的垂直对齐
text-decoration：设置或删除文本的装饰。
text-transform:uppercase：文本转换
text-indent：指定文本的第一行的缩进。
line-height：设置行高
height设置元素的高度

字体：

font-family设置文本的字体系列
font-style用于指定斜体文字的字体样式属性
font-size 属性设置文本的大小
font-weight指定字体的粗细

链接：

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

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

盒模型：包括：边距，边框，填充，和实际内容

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

边框：

边框简写：
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-radius	设置圆角的边框。
border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-style (required)用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-color设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border:5px solid red;

外边距、内边距

外边距：
margin:25px 50px 75px 100px;（上 右 下 左）
margin:25px 50px 75px;（上 左右 下）
margin:25px 50px;（上下 左右）

css分组和嵌套

// 分组用逗号隔开
h1,h2,p
{
    color:green;
}
// 嵌套：为所有 class="marked" 元素内的 p 元素指定一个样式。
.marked p
{
    color:white;
}

display：

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。


块元素是一个元素，占用了全部宽度，在前后都是换行符。<h1>  <div>  <p>
行内元素只需要必要的宽度，不强制换行。<span>  <a>
改变元素：
li {display:inline;}
span {display:block;}

position（定位）

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, 	right影响。

fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

relative：相对定位元素的定位是相对其正常位置。移动相对定位元素，它原来的空间还是存在的。

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

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

overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值

float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

clear 属性指定元素两侧不能出现浮动元素。
.text_line
{
    clear:both;
}

水平/垂直布局

元素/图片 居中对齐：margin: auto
.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
img {
    display: block;
    margin: auto;
    width: 40%;
}

文本 居中对齐：text-align: center
.center {
    text-align: center;
    border: 3px solid green;
}

左右对齐：absolute float

垂直居中对齐：padding  line-height
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

水平垂直居中 - 使用 position 和 transform
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

css3组合选择器

后代选择器(以空格     分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）

css伪类和伪元素

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容

box-shadow阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。	
blur	可选。模糊距离。（越小越密集）	
spread	可选。阴影的尺寸。	(阴影的大小)
color	可选。阴影的颜色。	
inset	可选。将外部阴影 (outset) 改为内部阴影。

背景

background-image
background-size
background-origin
background-clip

box-sizing

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中: