CSS基础使用

第一章初识CSS

第1节 CSS简介

CSS全称为"层叠样式表"(Cascading[kæˈskeɪdɪŋ] Style Sheets),它主要作用是定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等

第2节 CSS基础语法

选择符: 又称选择器,指明网页中应用样式规则的元素(标签)
{}   : 声明,在大括号中给元素设置样式,格式为key:value键值对方式,多个key:value时使用分号分割

CSS位置设置
- 1、内联式

内联式: 将css直接作用在标签上

- 2、嵌入式

嵌入式: 在当前的HTML页面的<head>标签中定义<style>标签

<style type="text/css">
    嵌入式CSS样式设置位置
</style>

- 3、外部式

外部式: 在外面重新创建一个以.css结尾的文件,然后在当前html页面中使用link标签引入此外部的css文件

<link rel="stylesheet" type="text/css" href="css/abc.css"/>

第3节 CSS注释

/* CSS注释 */

第二章 CSS的选择器

第1节什么是选择器

CSS样式定义由两部分组成,形式如下:
选择器{
    样式;
}

在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些标签。

第2节 CSS选择器的分类

1、标签选择器                               p{}
2、类选择器                                 .claa{}
3、ID选择器 (全局唯一)                      #id{}
4、子选择器 > (表示第一代子元素)             #id>p{} 
5、后代选择器                               #id p{}
5、通用选择器 *                             *{}
6、伪类选择器 :hover                        p:hover{}
7、分组选择器 h1,h2,p                       h1,h2,p{}

第三章 CSS的继承,优先级和重要性

继承

<div style="color: red;font-size: 100px;">
    <p>ppppp</p>
</div>

优先级
- 权值

1、标签的权值为1
2、类选择符的权值为10
3、ID选择符的权值最高为100
如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)

<style type="text/css">
    p{color:red;}
    .first{color:green;}
</style>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

- 层叠

当作用在同一个标签上的样式权值相同时,那么遵循就近原则,谁离标签近,谁的样式就会生效

重要性

有时候,在某些特殊情况下,在权值相同的情况下,要让某些样式的设置生效,这时候可以使用!important来设置他的最高权值

<style type="text/css">
    p{color:red !important;}
    p{color:green;}
</style>

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

第四章 CSS字体/段落/单位和值

第1节字体/段落样式

文字—字体:  
    font-family: "microsoft yahei";
文字—字号颜色:    
    font-size: 12px;
    color: #FF0000;
文字—粗体:
    font-weight: bold;
文字—斜体:
    font-style: italic;
文字-下划线
    text-decoration: underline;
文字-删除线
    text-decoration: line-through;
段落-缩进
    text-indent: 2em;
段落-行间距(行高)
    line-height: 1.5em;
段落-中文字间距、字母间距
    1、letter-spacing:50px;    中文或者是英文字母之间的间距
    2、word-spacing:50px;      英文单词之间的间距
段落-对齐
    text-align: left|center|right; 段落文本的左对齐|居中|右对齐

第2节单位和值

字体大小的单位一般我们前端使用px或者em表示
盒子高度/宽度的单位我们一般使用px或者%表示

注意: 
1、em表示一个固定值,如果当前的文字的font-size为14px,那么1em=14px,例如当面的首行缩进,当前段落的字体大小为14px,那么首行缩进text-indent:2em,就是24px,正好是两个字体大小,一般取离他最近的字体作为参照.

2、%一般表示宽度,它会以父元素作为参照计算;如果父元素宽度200px,子元素宽度为50%,那么子元素宽度就为200*0.5=100px

颜色值

1、英文命令颜色
    p{color:red;}
2、RGB颜色
    p{color:rgb(133,45,200);}
3、RGBA颜色
    p{color:rgba(133,45,200,1);}
    rgba颜色有4位,最后一位为颜色的透明度,取值范围为0~1,1:不透明,0:全透明
4、十六进制颜色
    p{color:#00ffff;}

第五章元素(标签)分类

第1节元素分类

块状元素
- 块状元素特点

1. 块状元素默认独占一行
2. 块状元素有宽度和高度

- 常见的块状元素

<div>、<p>、<h1>~<h6>、<ol>、<ul>、<table>、<form>

内联元素
- 内联元素特点

1. 不会独占一行,多个内联元素会水平顺序排列
2. 没有宽度和高度

- 常见内联元素

<a>、<span>、<em>、<strong>、<label>

内联块状元素
- 内联块状元素特点

1. 可以设置宽高
2. 不占一整行

- 常见内联块状元素

<img>、<input>

第2节元素转换(块状/内联/内联块状)

display属性可以将一个元素转换成其它元素类型
1、块状转内联
2、内联转块状
3、display: inline | block | inline-block;

第3节元素的隐藏/显示

display: none; 设置display属性为none,当前标签就会隐藏

第六章 CSS布局模型

第1节 CSS盒模型

盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系(用于前端布局),所有的块状元素都具有盒子模型的特点

第2节 CSS的布局

流动模型(Flow)

流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML网页元素都是根据流动模型来分布网页内容的

流动模型的特点
1、块状元素独占一行
2、内联元素不会独占一行而是从左向右排列

浮动模型(Float)

正常情况下块状元素独占一行,那么怎么能让块状元素并排显示呢?这时候就用到了浮动模型

实现浮动的css属性
float:left|right

高度塌陷问题处理
clear：left | right | both;

</center>

层模型(Layer)
- 绝对定位(position: absolute)

position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口.

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

- 相对定位(position: relative)

position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

- 固定定位(position: fixed)

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是窗口。由于窗口本身是固定的，它不会随浏览器窗口的滚动条滚动而变化.

div{
	width: 200px;
	height: 200px;
	border: 2px red solid;
	position: fixed;
	left: 100px;
	top: 100px;
}

第3节前端布局

一列布局

<div style="width: 1200px;height: 500px;margin: 0 auto;"></div>

二列布局

<div style="width: 100%;height: 500px;margin: 0 auto;">
	<div style="width: 50%;height: 500px;float: left;"></div>
	<div style="width: 50%;height: 500px;float: left;"></div>
</div>

三列布局

<div style="width: 100%;height: 500px;margin: 0 auto;">
	<div style="width: 33.33%;height: 500px;float: left;"></div>
	<div style="width: 33.33%;height: 500px;float: left;"></div>
	<div style="width: 33.33%;height: 500px;float: left;"></div>
</div>

第七章 CSS样式设置小技巧

水平居中设置-行内元素

被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的

水平居中设置-定宽块状元素

定宽块状元素,设置自身为 margin-left：auto；margin-right:auto

水平居中设置-不定宽块状元素

<style type="text/css">
	.container{
		text-align: center;
	}
	.container>ul{
		display: inline;
	}
	
</style>

<div class="container">
	<ul>
		<li><a href="#">1</a> </li>
		<li><a href="#">2</a> </li>
		<li><a href="#">3</a> </li>
	</ul>
</div>

垂直居中-父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height 高度一致来实现的

<div class="container">
	Hi 千锋教育
</div>

<style type="text/css">
	.container{
		background-color: red;
		height: 50px;
		line-height: 50px;
	}
</style>

垂直居中-父元素高度确定的多行文本

<div class="container">
	<div>
		<p>Hi 千锋教育</p>
		<p>Hi 千锋教育</p>
		<p>Hi 千锋教育</p>
		<p>Hi 千锋教育</p>
		<p>Hi 千锋教育</p>
	</div>
</div>

.container{
	background-color: red;
	height: 500px;
	display: table-cell;
	vertical-align: middle;
}

第八章 flex弹性盒模型

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对有些特殊布局非常不方便.2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

① Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局.

.box{
  display: flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀(这是兼容老版本浏览器的写法)

.box{
  display: -webkit-flex; /* Safari,chrome */
  display: flex;
}

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

② 基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

③ 容器的属性

以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

[1] flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

[2] flex-wrap属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

[3] flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

[4] justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

[5] align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

[6] align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴

第九章其他常用前端属性介绍

设置圆角

border-radius: 3px;

取消a标签的默认下划线

text-decoration: none;

取消无序列表的点

list-style: none;

取消input的边框以及焦点

outline: none;
border: none;

设置背景图片

background-image: url(img/timg.jpg);默认沿着水平方向和垂直方向进行平铺

background-repeat: repeat-y; 沿着垂直方向
background-repeat: repeat-x; 沿着水平方向
background-repeat: no-repeat; 不平铺

第十章 Google搜索首页练习

</center>

原型地址 : https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6 `

posted @ 2021-01-26 12:52 Super-然阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

然