css学习

css学习笔记(根据菜鸟教程)

css使用方法

id和class选择器

  • id
#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

速查

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值