CSS入门基础

最新推荐文章于 2024-10-07 21:54:14 发布

Ivy_Ch

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量335

点赞数

分类专栏： CSS基础 css3

本文链接：https://blog.csdn.net/Ivy_Ch/article/details/96140047

版权

CSS基础同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

经常查阅文档是一个非常好的学习习惯。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

css样式编辑可分为：

行内样式：就是代码写在具体网页中的一个元素内；

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
     
</body>
</html>

内嵌式：就是在</head>前面写；

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css内嵌样式</title>
    <style type="text/css">
        #div{width:100px;height:100px;background:red;}
    </style>
</head>
<body>
    <div id="div"></div>>    
</body>
</html>

外部式：就是引用外部css文件；

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css内嵌样式</title>
    <link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
    <div id="div"></div>>    
</body>
</html>

CSS文件

#div{width:50px;height:50px;background:pink;}

CSS语法：

选择器{属性：值；}

标签{属性：值；}
#id{属性：值；} 只能使用一次
.class{属性：值；} 可以使用多次

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落和表格的对齐的演示。

多类选择器：无先后顺序

<div class="pink fontWeight font20">亚瑟</div>
<div class="pink">伽罗</div>
<div class="pink font14">安其拉</div>
<div class="red font26">马可波罗</div>

字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等

font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font:综合设置字体样式 (重点)

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器{font: font-style  font-weight  font-size/line-height  font-family;}
h1{
font: 400 25px "宋体";
/*font:12px "微软雅黑"*/
}

CSS外观属性

color：文本颜色
line-height：行间距
text-align：水平对齐方式

left：左对齐（默认值） right：右对齐 center：居中对齐

是让盒子里面的内容水平居中，而不是让盒子居中对齐

text-indent：首行缩进（2em为每段首行缩进两个字的宽度）
text-decoration：文本的装饰

none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

CSS注释

CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

p {
  font-size: 14px;     /* 所有的字体是14像素大小*/
}

CSS背景

背景颜色background-color：red；
背景图像background-image：url（背景图像位置）no-repeat；
背景平铺background-repeat：no-repeat；

repeat：（默认）背景图像在纵向和横向上平铺

no-repeat：背景图像不平铺（不重复）

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向平铺

背景位置background-position：center top；

语法：

background-position : length || length；  /*像素  x轴 y轴*/
background-position ：25px 100px;  /*左移25px，向下移100px*/

background-position : position || position；   /* 水平center left right，垂直 center bottom top*/
background-position ：right top;  /*右上角*/

position后面可以跟方位名词他们之间没有先后顺序；

position后面也可以跟值按照：x y ；的顺序；

也可混合使用也是按照：x y ；的顺序；

背景固定background-attachment

语法：

background-attachment : scroll | fixed

参数：

scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定

说明：设置或检索背景图像是随对象内容滚动还是固定的。

背景简写background

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:red green blue alpha

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
            url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
             url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

盒子模型（CSS重点）

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

前端面试的时候，面试官可能会问到什么是盒子模型，上面就是答案。

盒子边框（border）

语法：

border : border-width || border-style || border-color ;

举例：

border: 1px dashed red;/*border-width border-style border-color*/
border-top: 1px dashed red;      /*上边框*/
border-bottom: 1px dashed red;   /*下边框*/
border-left: 1px dashed red;     /*左边框*/
border-right: 1px dashed red;    /*右边框*/

圆角边框(CSS3)

从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

border-radius: 左上角  右上角  右下角  左下角;
border: 1px;    /*四个角都为1px圆角*/

表格的细线边框

以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。

table{ border-collapse: collapse; }

collapse 单词是合并的意思，border-collapse:collapse; 表示边框合并在一起。

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top: 1px;      /*上内边距*/
padding-bottom: 1px;   /*下内边距*/
padding-left: 1px;     /*左内边距*/
padding-right: 1px;    /*右内边距*/
padding: 1px;          /*上下左右 内边距都为1px*/
padding: 1px 2px;      /*上下1px 左右2px*/
padding: 1px 2px 3px;        /*上1px 左右2px 下3px*/
padding: 1px 2px 3px 4px ;   /*上1px 右2px 下3px 左4px 顺时针*/

注意：padding会撑开带有 width 和 height 属性的盒子

我们要求这个 div 就是标准的 200 * 200；
加一个padding为20px的内边距就撑开了盒子了，变成了240*240的盒子；
保证盒子大小为 200 * 200，只需要将宽高设置为160*160，再加内边距20就可以了；
这个是宽高和内边距的算法，以后会经常遇到。

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top: 1px;      /*上外边距*/
margin-bottom: 1px;   /*下外边距*/
margin-left: 1px;     /*左外边距*/
margin-right: 1px;    /*右外边距*/
margin: 1px;          /*上下左右 外边距都为1px*/
margin: 1px 2px;      /*上下1px 左右2px*/
margin: 1px 2px 3px;        /*上1px 左右2px 下3px*/
margin: 1px 2px 3px 4px ;   /*上1px 右2px 下3px 左4px 顺时针*/
margin: 0 auto;      /*上下0px 左右自动 水平居中对齐 auto自动充满*/

注意：相邻外边距不能叠加，会自动合并；

文字盒子居中图片和背景区别

文字水平居中 text-align：center；
盒子水平居中 margin：0 auto；
插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

清除元素的默认内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

盒子阴影

语法：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影;
box-shadow:1px 1px 1px 1px pink;

水平阴影正值右移负值左移

垂直阴影正值下移负值上移

模糊距离值越大越模糊

阴影尺寸值越大尺寸越大

浮动（float）

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{ float:属性值; }

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动的目的就是为了让多个块级元素同一行上显示。

float 浮漏特

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。

特：特别注意，首先浮动的盒子需要和标准流的父级搭配使用，其次特别的注意浮动可以使元素显示模式体现为行内块特性

清除浮动

本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

方法：

clear属性用于清除浮动，其基本语法格式如下：

 选择器{clear:属性值;}   clear 清除 
 属性值：left right both

额外标签法

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>

父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。

使用after伪元素清除浮动

使用方法：

.clearfix:after {  /*正常浏览器 清除浮动*/
	content:"";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	*zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
}

<div class="father clearfix">
    <div class="big"></div>
	<div class="small"></div>
</div>

使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

定位（position）

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位唯一的用处：就是取消定位。 position: static;

相对定位relative(自恋型)

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

绝对定位absolute (拼爹型)

　[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

父级没有定位

若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相

子级是绝对定位的话，父级要用相对定位。

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

绝对定位的盒子水平/垂直居中

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1.首先left 50% 父盒子的一半大小
2.然后走自己外边距负的一半值就可以了 margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style>
		.father{
			position: relative;
			background-color: #ccc;
			width: 200px;
			height: 200px;
		}
		.son{
			position: absolute;
			background-color: pink;
			width: 100px;
			height: 80px;
			top: 50%;
			left: 50%;
			margin-top:-40px;/*高负数一半*/
			margin-left: -50px;/*宽负数一半*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>

</body>
</html>