CSS: css初学者基础

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主要有六大优点:表现与结构分离、应用于多个页面、利于维护、样式全面、移植性强、提高页面访问速度。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值