css
- css学习笔记(根据菜鸟教程)
- css使用方法
- id和class选择器
- 嵌套选择器
- 组合选择符
- 补充:CSS3选择器
- css的插入方式
- 样式优先级
- 伪类/伪元素
- css基础
- 块元素和内联元素
- 背景,文本,字体
- 位置
- disply 属性
- 块和内联元素
- position 定位
- overflow
- 对齐
- 填充(padding,margin)对齐
- 位置对齐
- 布局 !!
- box-sizing属性
- float 浮动(待学
- ?清除浮动
- 盒子模型(边框设置)
- border边框
- margin外边距与padding内边距
- 网格布局
- 创建网格属性:
- grid-template-columns/rows属性
- grid-gap属性
- 设置网格横跨行/列
- 关于网格线的定义
- 进阶
- 弹性布局(css3)
- 位置属性:
- justify-content 属性
- align-items 属性
- align-content 属性
- align/justify-self属性
- ?flex属性
- flex-direction
- flex-wrap
- flex-flow 属性
- flex-grow 属性
- flex-shrink 属性
- 推荐文章
- 响应式设计
- end
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>
如图
创建网格属性:
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
速查
更多推荐
css学习
发布评论