文章目录

CSS介绍
基本语法
CSS页面引入
常用CSS样式
基本选择器
盒子模型
CSS浮动
3、清除浮动
典型布局案例

CSS介绍

1、定义
CSS指层叠样式表（Cascading Style Sheets）如何显示控制HTML元素，从而实现美化HTML网页.
通俗来说，指样式与页面结构分开，代码更简洁
2、优势
为了让页面元素的样式更加丰富，也为了让页面的内容和样式能拆分开，CSS由此诞生、有了CSS，HTML中大部分表现样式的标签就废弃不用了，HTML只负责文档的结构和内容，表现形式完全交给CSS，因此HTML文档会变得更加简洁

基本语法

格式：选择器{属性：值；属性：值；属性：值;…}

CSS页面引入

方法一：内联式
通过标签的style属性，在标签上直接写样式

方法二：嵌入式
通过style标签，在网页上创建嵌入的样式表，比较常用。写在head里

方法三：外联式： 样式表中只要样式
通过link标签，链接到外部样式表到页面中，最常用。写在head里

样式表位置建议写相对路径，CSS样式文件建议直接存到CSS目录中，创建一个CSS目录，再在里面创建一个main.css文件，用来编辑样式代码。

# HTML框架 ：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body><div><ul><li>一</li><li>二</li><li>三</li><li>四</li></ul>
</div><div><ul><li>一</li><li>二</li><li>三</li><li>四</li></ul>
</div></body>
</html>

main.css文件：

div{border:1px solid red;width:700px;height:200px
}

常用CSS样式

文本设置

例如：

a{/*去掉超链接的文本装饰的下划线，常用*/text-decoration: none;
}
ul>li{/*去掉列表的文本装饰前面的点，常用*/list-style: none;/*设置行高*/line-height: 30px;
}

样式有很多很多，用的时候去官网查即可：W3C

颜色表示法

刚开始我们在模仿别人的页面去做的时候，如果看到人家用的好看的颜色想拿来用，可以直接看页面的源代码去找，箭头点击想要的颜色区域，右边查看源代码使用到的颜色

基本选择器

标签选择器

id选择器：只对一个元素
通过id名来选择元素，元素的id是唯一的，名称不能重复，所以一个样式设置项只能对应页面上的一个元素，不能复用

id名一般给程序使用，所以不推荐使用id作为选择器
先设置标签的id号，再去使用id标签：

用法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="CSS/main.css">/*  id选择器的设置样式：#id名称{}  */<style type="text/css">#box{border: 1px solid blue;width: 900px;}
</style></head><body><!--   设置div标签的id号信息为"box"    -->
<div id="box"><ul><li>一</li><li>二</li><li>三</li></ul>
</div></body>
</html>

类选择器：对一类
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类
应用灵活，可复用，是CSS中应用最多的一种选择器。
定义：
.类名{样式设置}

用法：

小案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*标签选择器*/table{border: 1px solid black;width: 50%;text-align: center;/*块级元素居中： margin: 0 auto *//*行内元素居中 : text-align:center   */margin: 0 auto;/*设置表格的外边距：上外边距*/margin-top: 50px;}/*类选择器*/.odd{background-color: lightgray;}/*当鼠标经过odd类对应的标签时，元素的样式*/.odd:hover{font-size: 120%;background-color: gray;}/*id选择器*/#table-head{font-weight: bold;color: darkgreen;font-size:30px ;}</style>
</head>
<body><table><caption id="table-head">表格</caption><tr><td>1-1</td><td>1-2</td></tr><tr class="odd"><td>2-1</td><td>2-2</td></tr><tr><td>3-1</td><td>3-2</td></tr><tr class="odd"><td>4-1</td><td>4-2</td></tr></table></body>
</html>

层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器

伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容

盒子模型

所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。

外边距和内边距都有上下左右
边框一般有：宽度、实线、颜色

举例：设计一个盒子它的实际内容宽度为300px，有25px内边距，25px外边距，25px绿色边框
那么盒子的总宽度为：300px(实际宽) + 50px(左右内边距) + 50px(左右外边距) + 50px(左右边框) = 450px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{background-color: lightgray;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;text-align: center;}</style>
</head>
<body><div class="box">这里是盒子的实际内容</div></body>
</html>

小例子：

<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head><meta charset="UTF-8"><title>scq的web浏览器 </title><style>.box,img{width:400px;}.box{border: 2px gray solid;}.detil{font-size: 10px;padding: 10px;margin-top: 8px;}</style>
</head>
<body>
<div class="box"><div class="image"><img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1581836845447&amp;di=2931783df08197da0e9525282ac17348&amp;imgtype=0&amp;src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-06-19%2F5b28c49d9ef7c.jpg" alt="picture"></div><div class="detil">《猫和老鼠》从1940年问世以来，一直是全世界最受欢迎的卡通之一。还记得汤姆和杰瑞吗？这是一部史上最“疯狂”、最“暴力”，但也最有趣的动画片。</div></div></body>
</html>

CSS浮动

1、定义
CSS的Float浮动，会使元素向左或向右移动，其周围的元素也会重新排列。
浮动，往往是用于图像，但它在布局时一样非常有用

2、浮动规则

小案例

<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head><meta charset="UTF-8"><title>沈楚琪的web浏览器 </title><style>*{padding: 0;margin: 0;}.image img{width: 50%;height: 50%;float: left;}.box{border: 1px black solid;width:500px;height: 200px;}.detil p{font-size: 15px;line-height: 20px;}</style>
</head>
<body><div class="box"><div class="image"><img src="http://image.biaobaiju.com/uploads/20190807/14/1565157870-ASngFMtwZo.jpeg"  alt="picture"></div><div class="detil"><p>意境头像小清新高清，插画简洁女生男生，呆萌唯美可爱萌萌哒天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后，天雷将会降临，摧毁魔丸。</p></div>
</div></body>
</html>

3、清除浮动

clear
案例：网站主页设计

<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head><meta charset="UTF-8"><title>沈楚琪的web浏览器 </title><style>*{padding: 0;margin: 0;}.header,.footer{background-color: gray;clear: left;padding: 20px;}.container{width: 100%;border: 1px solid gray;line-height: 150%;}.left ul {text-align: left;border: 1px black solid;width: 30%;float: left;padding: 50px;margin-right: 50px;}.content {padding: 16px;border-left: blueviolet 1px solid;width: 75%;}</style>
</head>
<body><div class="container"><div class="header"><h1 class="head">XXX website</h1></div><div class="left"><ul><li>python</li><li>go</li><li>c</li><li>java</li></ul><div class="content" ><h2>网站介绍</h2><p>这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍这里是一些介绍欢迎来到本网站！！！！</p></div></div><div class="footer"><p><h1>ending</h1></p></div>
</div></body>
</html>

典型布局案例

1、分页
在实现分页之前，先介绍一个属性

display属性
规定元素应该生成的框的类型

常用属性:

CSS实现分页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}.container{width: 50%;margin: 0 auto;}.pagination li{/*删除无序列表前面的标记*/list-style: none;/*每个列表设置为行内块元素*/display: inline-block;/*设置宽度*/width: 30px;/*添加边框*//*border: 1px solid black;*//*设置背景颜色*/background-color: gold;/*设置字体大小*/font-size: 12px;/*字体居中*/text-align: center;/*设置内边距：上下为5px，左右为10px*/padding: 5px 10px;}.pagination li:hover{font-size: 120%;}.pagination li a{/*删除超链接的下划线*/text-decoration: none;/*设置字体颜色*/color: black;}</style>
</head>
<body><div class="container"><h1>分页案例</h1><ul class="pagination"><li><a href="#">&lt;&lt;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li>...</li><li><a href="#">20</a></li><li><a href="#">&gt;&gt;</a></li></ul></div></body>
</html>
#先设计框架，在读取css样式

注意:

（1）有一个 & lt; & lt; 和 & gt; & gt;

这是 << 和 >>的转义字符，直接写<< 和>>是写不了的
（2）padding 属性的默认值是有4个的，且该属性可以有1~4个值

页面展示:

导航栏：

<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head><meta charset="UTF-8"><title>沈楚琪的web浏览器 </title><style>*{margin: 0;padding: 0}.container{margin: 0 auto;width: 930px;background-color: aqua;}.page ul li{list-style: none;display: inline-block;text-align: center;padding: 12px;width: 100px;height: 18px;}.page li:hover{font-size: 120%;}.page li a{text-decoration: none;color: white;}.header{text-align: center}</style>
</head>
<body>
<div class="header"><h1 >导航</h1></div><div class="container"><div class="page"><ul class="ulpage"><li style="background-color: aquamarine"><a href="#" >首页</a></li><li><a href="#">网站建设</a></li><li><a href="#">程序开发</a></li><li><a href="#">网络营销</a></li><li><a href="#">企业VI</a></li><li><a href="#">案例展示</a></li><li><a href="#">企业联系我们</a></li></ul></div></body>
</html>

注意：首页颜色与其他背景颜色不同的步骤为在列表中设置背景颜色

前端—CSS层叠样式表相关推荐

Web前端——CSS层叠样式表
>css概述:层叠样式表样式:调整HTML的显示效果(大小,颜色,对齐,边框,阴影,行高,文本样式,文字,阴影,内填充,外边距,定位,过渡,动画) HTML中就可以进行一些基本的样式调整,cs ...
css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
带你了解前端之CSS层叠样式表
文章目录一.CSS层叠样式表二.CSS基本选择器三.CSS组合选择器四.CSS属性选择器五.CSS选择器之分组与嵌套六.CSS选择器之伪类选择器七.CSS选择器之伪元素选择器八.CSS ...
二：前端css，即选择器
前端css: 1,css 的引入方式 2,css中选择器 1.基本选择器: /*标签选择器*/ /*类标签选择器,.类属性值重点知识*/ /*id选择器,#+id值,#id的值,不是id,重点知识* ...
咸鱼前端—CSS初识
咸鱼前端-CSS初识 CSS的发展历程 CSS 网页的美容师 CSS初识引入CSS样式表(书写位置) CSS样式规则 CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它 ...
测试一下您对于CSS层叠样式表了解有多少
CSS 层叠样式表,英文全称:Cascading Style Sheets是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...
前端CSS经典面试题总结
前端CSS经典面试题总结 2.1 介绍一下 CSS 的盒子模型? 2.2 css 选择器优先级? 2.3 垂直居中几种方式? 2.4 简明说一下 CSS link 与 @import 的区别和用法? ...

前端—CSS层叠样式表