CSS: css初学者基础

Ykkkf

于 2021-02-02 20:15:27 发布

阅读量175

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_53283519/article/details/113512826

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS思维导图 在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
CSS是什么？

层叠样式表(Cascading Style Sheets,缩写为CSS, 是一种样式表语言，用来描述HTML或XML (包括如SVG、MathML. XHTML之类的XML分支语言)文档的呈现。

CSS的作用？
简而之就是主要用于修饰 html xhtml html5 xml 让网页有这种千变万化的形式。

怎样创建CSS？

通过文本编辑器之间创建
文本类型的文档后缀名设置为.css

CSS的特点？

继承：
网页中子元素，将继承父元素的样式
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
层叠：
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式
后面定义的样式，会覆盖前面定义的样式。

CSS的基础

一.CSS书写格式 4种引入方式
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{font-size:36px;}
	
	</style>
</head>
<body>

内嵌式引入
把style标签嵌套在head标签中

<head>
 
<body>
   <div style="font-size:14px;color:#000"> 直接在html标签中使用style设置样式</div>
</body>
 
</html>

行内嵌入式，直接在html的标签中使用style设置样式。通过这种方式写的样式会覆盖掉其他引入方式的样式。

<html > 
    <head>  
      <link rel="stylesheet" type="text/css" href="css/main.css">     
    </head>      
    <body>
         </body> 
</html>

ink链接式，也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的标签对中使用标记来引入外部样式表文件。

<style type="text/css">
  @import url("css/style.css");

</style>

内嵌和外链一种综合性的使用。

以上4种引入方式，哪种优先级高：

会显示哪种样式取决于哪种样式离修饰的目标越近
行内样式>剩下的其它三种形式，样式的显示取决于距离

二、CSS选择符

实例

body{color:red;} p{color:red}

标签选择符：通过标签的名字来命名的，对html中的所有该标签都起作用。

	#one{
			color:gold;
		}

id选择器：当标签中出现id属性的那么可以使用id选择器
Id选择器通常应用于某些标签中独有的样式
Id选择器的标识是#。

.pink{
			color:pink;
		}

类选择器：当标签中出现class属性的时候那么可以使用类选择器
类选择器通常应用于某几个标签具有相同的样式

*{font-size:36px;color:black;}

全选择器使用*号来表示对整个html中的所有标签都起作用。

适用场景：每种浏览器的默认属性的相关值都不一样，一般情况在网页开发的初始阶段，需要把所有浏览器的默认值都归到一个统一的默认值下。然后再进行具体其他操作。

三、CSS文字样式
1.css字体样式
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	
	  body{
	  	font-size: 16px;
	  	line-height: 1.5;
	  }

	  #content {
	  	font-size: 30px;
	  	font-family:'黑体';
	  	font-weight: normal;
	  	width: 100%;
	  	height:50px;
	  	border-bottom: 1px solid blue;
	  	text-align: center;
	  	line-height: 50px;
	  }
```	</style>
</head>
<body>
<body>
<div id="content"></div>
	
</body>
</html>

字体样式

功能	语法
设置字号	font-size:12px
设置字体	font-family:Arial,‘宋体’
设置字色	color:#000000
设置行高	line-height：150% line-height：1.5em
设置字体的粗细	font-weight：normal[正常]bold[粗体]

单位： px 和em 比较常用建议大家经常使用百分比,适合做屏幕适配

文本样式

功能	语法
设置对象中文本缩进	text-indent：2em 可以为负值
对象中空白处理	white-space：normal[自动换行] pre[换行和空白受保护]nowrap[强制在同一行显示]
文本水平对齐方式	text-align：left[左]center[中]right[右]
文本大小写控制	text-transform：none[正常大小] capitalize[每个单词的第一个字母转换成大写]uppercase[转换成大写]lowercase[转换成小写]
元素的垂直对齐方式	vertical-align：sub[设置文字为下标]super[设置文字为上标]top[把元素的顶端与行中最高元素的顶端对齐]text-botton[把元素的低端与父元素字体的低端对齐]
去隐藏页面的标题	text-indent：-9999em
用于大小写字母转换	Text-transform

Text-align 它只能控制文本是否居中不能控制div是否居中
如果想让div居中要通过盒子模型中margin:0 auto;

四、CSS盒子模型

实例

*{
	margin: 0px;
	padding: 0px;
}

#wapper{
	margin: 30px auto;
	width: 100%;
	height: 400px;

}
#header{
	height: 20px;
}
#header .nav{
	margin:0px; 

}

内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border：1px solid black
像素值实线颜色

Margin：100px 上下左右都是100px的距离
Margin：100px 200px；上下100px、左右 200px
Margin：100px 200px 300px 上100px 左右 200px 下300px
Margin：100px 200px 300px 400px 上、右、下、左

Margin-top margin-left margin-right margin-bottom
padding、border也适用于4个方向

五、CSS元素

块状元素具有高度和宽度的属性，但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性： display:block;
内联元素不具有宽度和高度的属性允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display：none 可以隐藏元素

六、CSS布局

浮动：float
浮动是css实现布局的一种方式，包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none：不浮动
left：对象向左浮动，而后面的内容流向对象的右侧
right：对象向右浮动，而后面的内容流向对象的左侧
Left：前面的元素浮动效果后，会对后面的元素产生影响
定位布局：position
属性：positon
描述：设置对象的定位方式
值：
static 静态定位：页面中的每一个对象的默认值。
absolute 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
relative 相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位
溢出：overflow
visible[默认值。不剪切内容也不添加滚动条]，
auto[在必需时对象内容才会被裁切或者显示滚动条]，
hidden[ 不显示超过对象的尺寸的内容]，
scroll[总是显示滚动条]

七、CSS背景

功能	语法
背景	background:颜色图片平铺方式固定方式位置
背景颜色	background-color：#ccc；
背景图像	background-image：url（背景图像的位置及全称）
背景图像的重复方式	background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
背景图像的位置	background-position：top[left centerright]center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素（0px 0px）]
背景图像的依附方式	background-attachment;[scroll、fixed]

CSS3

选择器
框模型
背景和边框
文本效果
2D/3D转换
动画
多列布局
用户界面

CSS总结

HTML和CSS的区别在于HTML用于结构化内容，CSS用于格式化结构化的内容。CSS即可以写在HTML页面里，也可以单独封装成一个后缀名为js的文件，在页面里来引用它，引用方式也并不单一，使用起来非常的方便。CSS主要有六大优点：表现与结构分离、应用于多个页面、利于维护、样式全面、移植性强、提高页面访问速度。