概念:用来修饰网页样式的语法叫做层叠样式表
CSS基础语法
格式:选择器{属性1:值1;属性2:值2}
单位:px->像素、%百分比(相对于外容器)
基本样式:width、height、background-color
注释:/css注释内容/
css:用来修饰网页样式的语法叫做层叠样式表
css样式引入方式
行内(内联、行间)样式
在html标签上添加style属性实现的
<p style="text-align: center; background-color: aquamarine;">
文字水平居中
</p>
内部样式
在style标签内添加的样式
内联和内部样式的区别
内部样式可以复用代码,多个同标签可以引用,更能符合w3c的规范标准,让结构和样式分离。行内样式无法复用,一个style属性只能影响一个元素
外部样式
引入一个单独的css文件,name.css
引入方式
方式一.<link>标签 //当前页面与外部资源的引入入口
rel 属性 :指定资源与页面的关系,常用stylesheet属性值(其它属性值入口),用于文档的外部样式表
href属性:资源的地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
<div >
哈哈
</div>
</body>
</html>
方式二.@import 这种方式问题比较多不建议使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
@import url("./index.css");
</style>
</head>
<body>
<div >
哈哈
</div>
</body>
</html>
link和@import区别:(区别是摘抄该作者的,更详细大家可以去该作者文章看看https://www.cnblogs.com/my–sunshine/p/6872224.html)
1.从属关系区别
@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。
5.权重区别(该项有争议)
link引入的样式权重大于@import引入的样式。
span-div标签
div和span没有任何默认样式的,如果只是单纯的将这两个双标签放在html代码当中,那么他们在浏览器中是相当于没有的,也不会有占位效果,需要配合CSS使用才行
<span></span>
标签:一个容器标签,不具备任何特殊功能,仅当容器使用,用于包裹一段文本。便于给文本增加样式(行内元素)
<p style="text-align: center; background-color: aquamarine;">
文字水平居中
</p>
<p style="text-align: center; background-color: aquamarine;">
<span style="background-color: bisque;">span容器</span>
</p>
div:div全程为division,'分割、分区’的意思,<div>
标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML大多数的标签都可以嵌套在<div>
标签中,<div>
中还可以嵌套多层<div>
,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。一个通用的容器标签,不具备任何特殊功能,仅当容器来使用,可以包裹任何内容,也可以容器直接互相包裹 ;特点:一个空div,默认宽度100%,高度为0
css常用属性
text-align:“center” :让容器内部元素水平居中
line-height:‘容器高度’
让文字垂直居中 ling-height==height
<div id="nav" style="height: 100px;background-color: aquamarine;line-height: 100px;">文字垂直居中</div>
background-color:pink ;背景颜色
text-decoration:none 文本修饰去掉a标签下划线
<a href="">a标签自带下划线</a>
<a href="" style="text-decoration: none;"> 去掉下划线</a>
border:边框样式 边框大小 边框颜色;边框样式分为solid实线,dashed:波浪线,dotted:…点
margin:auto 让容器本身水平居中
<div id="" style="width: 200px; background-color: gold">
<div id="" style="color: red; width: 100px; margin: 0 auto;background-color:pink;height:100px">
</div>
</div>
body默认样式
body标签默认情况:margin会有8px的空隙,一般会在开始就先将body的margin置为零
<body bgcolor="gold">
<div id="bannar">
<img width="100px" src="../img/可爱二.jpg" >
</div>
<div id="nav"></div>
<div id="footer"></div>
</body>
元素宽高的百分比是相对父元素而言的,若父元素高度为0,则子元素高度即使设置100%,大小也是0,html元素是相对于浏览器窗口而言的,默认情况下html高度为0,如果要是实现body沾满整个屏幕则需要同时设置html,body的高度为100%
<style type="text/css">
html,body{
margin: 0;/* 清除窗口滚动条 */
height: 100%; /* 占满整个屏幕*/
}
</style>
css选择器
id选择器 #name :表示身份 ,在页面中元素的id不允许重复,因此id选择器只能选择单个元素
class选择器 .name :类(别)选择器:选择拥有该类别的多个元素
标签选择器 div :根据标签名称选择对应的所有标签
*通用选择器 :针对页面上所有的标签都生效
组合选择器:.a,.b,.c 样式相同的组合
选择器优先级
行内样式>内部样式表
行内样式>id选择器>类选择器>标签选择器>通用选择器
css权重值
当样式发生冲突时,谁的权重值高,谁就生效(根据精确值,精确值越高,权重值越大,通用选择器选择的最多,然后class可以公用,id就是唯一标识,行内就是只在本元素生效)
通用选择器*:权重值0,
标签(元素)选择器div:权重值1
类选择器class:权重值10
id选择器:权重值100
行内样式:权重值1000
css文本属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{color: red; /* 文本颜色*/}
.p2{font-family: "宋体"; /* 字体类型*/ }
.p3{font-size: 30px; /* 字体大小*/}
.p4{font-weight: bold; }/* 字体加粗 */
.p5{font-style: italic; }/* 文字斜体 */
.p6{text-align: center;}/* 文字居中 */
.p7{line-height: 20px;}/* 行高 */
.p8{height:50px ;line-height: 50px; background-color: bisque;}/* 垂直居中*/
.p9{text-decoration: underline;} /* 文本修饰 none没有下划线*/
.p10{text-indent: 20px;}/* 首行缩进 */
</style>
</head>
<body >
<div>
<ul id="news">
<li class="p1">p1 文本颜色</li>
<li class="p2">p2 字体类型</li>
<li class="p3">p3 字体大小</li>
<li class="p4">p4 字体加粗</li>
<li class="p5">p5 文字斜体k</li>
<li class="p6">p6 文字居中</li>
<li class="p7">p7 行高</li>
<li class="p8">p8 垂直居中</li>
<li class="p9">p9 文本修饰 none没有下划线</li>
<li class="p10">p10 首行缩进</li>
</ul>
</div>
</body>
</html>