css学习

qq_51177088

已于 2022-04-14 16:37:23 修改

阅读量250

点赞数

分类专栏： html css javascr 文章标签：前端 css

于 2022-03-27 18:09:27 首次发布

本文链接：https://blog.csdn.net/qq_51177088/article/details/123458262

版权

html css javascr 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css

css学习笔记（根据菜鸟教程）

css学习笔记（根据菜鸟教程）

css使用方法

id和class选择器

#chan{...}

id="chan"

class

.chan{...}

class="chan"

tip:类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

嵌套选择器

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

组合选择符

后代选择器(以空格分隔)
选取该元素的后代，非该元素的后代不会被选择
eg：div p

div p
{
	background-color:yellow;
}

子元素选择器(以大于 > 号分隔）
只能选取直接子元素，孙子等不能被选择
eg：div>p
相邻兄弟选择器（以加号 + 分隔）
紧接在另一个元素后的兄弟元素，而且二者有相同的父元素
eg：div+p
普通兄弟选择器（以波浪号～分隔）
接在另一个元素后的所有兄弟元素
eg:div~p

补充：CSS3选择器

参考链接

p:nth-child：表示被选择的元素是p标签且为该父元素的第二个子元素

p:nth-of-type：表示被选择的元素是p标签且为该父元素的第二个p元素

css的插入方式

插入样式表的方法有三种:

外部样式表(External style sheet)
每个页面使用 <link> 标签链接到样式表（可以多次应用到不同页面，适用性广）

<!--引用方式-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--在mystyle.css文件不中能包含任何的 html 标签-->
<!--且样式表应该以 .css 扩展名进行保存。-->

内部样式表(Internal style sheet)
可以使用 <style> 标签在文档头部定义内部样式表（当单个文档需要特殊样式时）

<head>
<style>
p{text-align:center;}
</style>
</head>

内联样式(Inline style)
需要在相关的标签内使用样式（style）属性(仅用于一个标签，适用性小一般不采用）

<body>
<p style="text-align:center;">
</body>

样式优先级

内联样式> 内部样式>外部样式> 浏览器默认样式

伪类/伪元素

CSS伪类是用来添加一些选择器的特殊效果。

p > i:first-child 取所有<p>元素的第一个 <i> 元素
在这里插入图片描述

css基础

块元素和内联元素

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

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

内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>

背景，文本，字体

background

background-color:red;
background-image:url(‘图片地址’);
background-repeat:no-repeat;
背景图像是否及如何重复
background-attachment:fixed;
背景是否固定
background-position:right top;

/*也可以缩写，但需要严格按照上述顺序*/
{background:#ffffff url('img_tree.png') no-repeat right top;}

text
tip：在次只介绍较为常用的方法，具体请查看菜鸟教程

text-align 文本对齐方式
justify：可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘
center：居中
left/right：靠左/右
eg:text-align:center;
text-decoration 设置或删除文本的装饰（其实主要是用来删除链接的下划线）
eg：text-decoration:none;
text-indent首行缩进
eg：text-indent:48px;

font

font-family 设置文本的字体系列
eg：font-family："宋体"
font-size 字体大小
tip:单位转换px/16=em
eg:font-size:1em/16px/100%;
font-weight 字体粗细(normal/lighter/bold)
egfont-weight:900/bold
更多见菜鸟教程

位置

disply 属性

隐藏元素
display属性设置为"none"，或把visibility属性设置为"hidden"可以隐藏一个元素（但visibility会影响布局，而display不会）

块和内联元素

display属性可以可以更改内联元素(“inline”)和块元素(“block”)

block（块级元素）：独占一行，占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整。
常用的块状元素
<div>、<p>、<h1>、<ol>、<ul>、<dl>、<table>、<form>
inline（行内元素）：不独占一行，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
常用的内联元素
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
？内联块状元素：
<img>、<input>
其他属性见布局(flex,grid…)

position 定位

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

static
静态定位的元素不会受到 top, bottom, left, right影响,换句话说，它没有定位
fixed
不随窗口滚动
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
relative
相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
sticky
正常情况下它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，会固定在目标位置。

overflow

overflow 属性用于控制内容溢出元素框时显示的方式

visible
默认情况下，overflow 的值为 visible，多出的内容不会被修剪，会呈现在元素框之外。
hidden
内容会被修剪，溢出内容是不可见的。
scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit
从父元素继承 overflow 属性的值。
注意:overflow 属性只工作于指定高度的块元素上

对齐

填充（padding，margin）对齐

文本
文本在元素内居中对齐，可以使用 text-align: center;
图片
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:
eg

img {
    display: block;
    margin: auto;
    width: 40%;
}

对齐元素
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;

位置对齐

position: absolute; 属性对齐元素
该方法并不是直接通过position定位，而是position设置定位方式，通过right，left，top等属性定位

.right {
    position: absolute;
    right: 0px;
    width: 300px;
}

使用 float 属性来对齐元素:

.left{
    float: left;
    width: 300px;
}

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 overflow:auto来解决该问题。

布局！！

box-sizing属性

1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；

2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】

属性值border-box
设置的宽度或高度就是实际的宽度，不被padding等属性影响
例：

* {
  box-sizing: border-box;
}

#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}

#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}

如图：
在这里插入图片描述

属性值 content-box
默认值，高度和宽度只应用于元素的内容，会被padding等元素影响
例：

* {
  box-sizing: content-box;
}

#example1 {
  width: 300px;
  padding: 40px;  
  border: 15px solid blue;
}

#example2 {
  width: 300px;
  padding: 10px;  
  border: 2px solid red;
}

如图：
在这里插入图片描述

float 浮动（待学

一个浮动元素会尽量向该方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

?清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素

盒子模型（边框设置）

border边框

border-width属性：边框宽度
border-style属性：定义边框的样式

eg：

/*border-style可以有1-4个值*/
/*该值的书写顺序具有普适性*/
border-style:dotted solid double dashed;
/*上 下 左 右*/
border-style:dotted solid double;
/*上 左右 下*/
border-style:dotted solid;
/*上下 左右*/
border-style:dotted;
/*上下左右*/

border-color属性：边框颜色
也可以缩写，但要按照以上顺序
eg：

border:5px solid red;

更多见菜鸟教程

margin外边距与padding内边距

在这里插入图片描述
margin与padding属性可以有一到四个值

padding: 24px 24px 24px 24px;

上右左下

padding: 24px 24px 24px;

上左右下

padding: 24px 24px;

上下左右

padding: 24px;

上下左右

网格布局

我们使用**display:grid;**属性将父类设置为网格容器，该容器的所有直系子元素将成为网格元素

例：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  //设置有几列
  background-color: gray;
}
.grid-item {
  background-color: blue;
  border: 1px solid black;
  padding: 20px;
}


<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
</div>

如图
rutu

创建网格属性：

grid-template-columns/rows属性

用来创建网格行和列，都写在父css样式中

grid-template-columns：在网格容器中创建列
grid-template-rows：在网格容器中设置行的高度
fr(单位）：可以自动根据网格容器的宽度来计算列的宽度

例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
  background-color: blue;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
}

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
</div>

如图：
在这里插入图片描述

grid-gap属性

用于设置网格间距，在父css样式中

grid-column-gap 属性来设置列之间的网格间距：
grid-row-gap 属性来设置行之间的网格间距：
grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写，可以一次设置俩

例：

.grid-container {
  display: grid;
  grid-gap: 4px 48px;
  //4px为行距 48px为列距
  //若只写一个则同时为行距和列距
  grid-template-columns: auto auto auto;
  background-color: blue;
}

如图：
在这里插入图片描述

设置网格横跨行/列

用来创建横跨行或列的网格，在子css样式中

横跨行
grid-column-start:
grid-column-end:
例：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  padding:20px;
  background-color: rgba(255, 255, 255, 0.8);
}

横跨列
grid-row-start:
grid-row-end:
例：

.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
  padding:20px;
  background-color: rgba(255, 255, 255, 0.8);
}

如图：
在这里插入图片描述
？为什么5不在原来的位置，而是跑去了左边
可以用 grid-area来解决

grid-area横跨行和列
grid-area:1 / 2 / 4 / 3; 从第一行第二列起，到第四行第三列为止
grid-area:1 / 2 / span 4/span 2; 从第一行第二列横跨四行两列

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
	grid-area:1 / 1 / span 1/span 2; 
}

.item5 {
	grid-area:2 / 2 / 4 / 3; 
}

在这里插入图片描述

缩写
属性设置横跨列，可以缩写为grid-row
属性设置横跨行,可以缩写为grid-column:
grid-area是上述的再进一步缩写
写法：
grid-column:1/3

grid-column:1/span 3
在这里插入图片描述

其中span关键词后的数值，表示合并单元格的数量

关于网格线的定义

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。
在这里插入图片描述

进阶

弹性布局（css3）

display:flex;

位置属性：

justify-content 属性

用于设置或检索弹性盒子元素在横轴方向上的对齐方式。
设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

属性值：（适用于弹性布局的四种属性）


/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */


/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

示例

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    justify-content: center;
}

#main div {
   height:50px;
}



<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green</div>
</div>

在这里插入图片描述

align-items 属性

align-items 属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。

示例

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: center;
}

#main div {
   height:50px;
}

在这里插入图片描述

align-content 属性

用于设置垂直方向上的网格元素在容器中的对齐方式。（对于行的排列设置）
示例

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

如图在这里插入图片描述

align/justify-self属性

align-self：定义flex子项单独在纵轴方向上的对齐方式，用于子css样式
justify-self定义flex子项单独在横轴方向上的对齐方式，用于子css样式

示例

#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items: flex-start;
}

#main div {
    flex: 1;
}

#myBlueDiv {
   align-self: center;
}

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div>  
  <div style="background-color:lightgreen;">绿色 div</div>
</div>

如图
在这里插入图片描述

？flex属性

？flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
？flex：1 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
以下属性都是要在弹性布局display:flex;中才起作用

flex-direction

弹性盒元素的排列方向
属性值：

属性值
row （默认值）水平显示
row-reverse 与 row 相同，但是以相反的顺序。
column 垂直显示
column-reverse
与 column 相同，但是以相反的顺序。

例：

#main {
    display: flex;
    flex-direction:row;
}
  
#main div {
	width: 40px;
	height: 40px;
}

<div id="main">
	<div style="background-color:coral;">A</div>
	<div style="background-color:lightblue;">B</div>
	<div style="background-color:khaki;">C</div>
</div>

如图：
在这里插入图片描述

flex-wrap

属性规定在必要的时候拆行或拆列

属性值
nowrap （默认值）规定项目不拆行或不拆列。
wrap 规定项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

例子：

在这里插入代码片#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-wrap: nowrap;
}

#main div {
    width: 50px;
    height: 50px;
}


<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

在这里插入图片描述

wrap拆行使得元素不会被压缩

在这里插入代码片#main {
    width: 200px;
    height: 200px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-wrap: wrap;
}

#main div {
    width: 50px;
    height: 50px;
}


<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>

在这里插入图片描述

flex-flow 属性

是 flex-direction 和 flex-wrap 属性的复合属性。
语法：
flex-flow: flex-direction flex-wrap;

flex-grow 属性

扩展元素的宽度（有点类似于grid-area？

示例：

#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

如图
在这里插入图片描述

flex-shrink 属性

flex-shrink 属性指定了 flex 元素的收缩规则。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
例：

#content {
  display: flex;
  width: 300px;
}

#content div {
  flex-basis: 100px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}
.box2 { 
  flex-shrink: 3; 
}

<div class="box" style="background-color:yellow;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box1" style="background-color:grey;">D</div>
  <div class="box2" style="background-color:lightgreen;">E</div>

如图：
在这里插入图片描述

响应式设计

通过重新设置width padding float等属性，改变页面布局

eg：

/*如果文档宽度小于 300 像素则修改背景颜色:*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

end

速查

qq_51177088

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

文章目录css学习笔记（根据菜鸟教程）css使用方法id和class选择器嵌套选择器组合选择符css的插入方式样式优先级伪类/伪元素css基础背景，文本，字体盒子模型（边框设置）border边框？margin外边距与padding内边距位置disply 显示position 定位overflowfloat 浮动布局网格布局网页布局弹性布局（css3）css学习笔记（根据菜鸟教程）css使用方法id和class选择器id#chan{...}id="chan"class.chan{.
复制链接

扫一扫