CSS是什么
CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。
CSS名词解释
CSS (Cascading Style Sheets) ：指层叠样式表
样式： 给HTML标签添加需要显示的效果。
层叠： 使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。
怎么书写CSS
一般标签都可以添加一个style属性来书写样式给标签添加一些特殊效果
CSS使用的基本语法：
<标签名 style="样式名1 : 样式值1；样式名2 : 样式值2；…" ></标签名>
CSS和HTML结合的方式
方式一：使用HTML标签的style属性（行内）
通过标签中使用style属性，在style属性中写css样式
<!--需求：
书写div，要求设置：字体为黄色，字体大小100px，
边框为 1px 实线 边框颜色为红色
-->
<div style="color: yellow; font-size: 100px; border: 1px solid red;">
我是div
</div>实际开发中，一个页面中有很多div标签，当我们需要统一修改所有标签的文字颜色为黄色的话，那么需要一个一个的去改，这样是非常麻烦的，不利于后期的维护。
缺点：
1、html代码和css代码耦合在一起,样式过多后，难以维护
2、冗余代码过多
方式二：在head标签使用style标签设置（内部）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
font-size: 100px;
background: yellow;
border: 1px solid blue;
}
</style>
</head>
<body>
<!--
需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线 边框颜色为蓝色
-->
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
</body>
</html>注：type=”text/css”可以省略
方式三：在head标签中的style标签使用@import
方式四：在head标签中使用link标签引入css文件
语法格式：
<link rel="stylesheet" type="text/css" href="css文件路径" />
注：rel="stylesheet" 不能省略
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/1.css" />
<!--<style type="text/css">
<!--使用import引入外部的文件-->
<!-- @import url("../css/1.css");
</style>-->
</head>
<body>
<!--
需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线 边框颜色为蓝色
-->
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
</body>
</html>第四种是开发中经常使用的。这是因为html文件中都是html标签，而我们第四种方式正是使用的标签。这样提高代码的可读性。
CSS选择器
标签名选择器
语法格式：
标签名称｛
css代码;
｝
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
font-size: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<span>我是span,不受影响</span>
</body>
</html>ID选择器
作用于某一个特定的标签上
语法格式：
#选择器的名称 ｛
css代码；
｝
使用：
<标签名 id=” 选择器的名称” />
注：页面的id值不允许重复。
class选择器
作用在一组标签之上
语法格式：
.选择器的名称 ｛
css代码；
｝
使用：
<标签名 class=”xxxx” />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.mydiv{
color: red;
font-size: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--页面上有多个div，让第二和第三个div以同样的样式去显示： 字体颜色红色，50px字体大小，边框1px 实线 红色-->
<div>我是div1</div>
<div class="mydiv">我是div2</div>
<div class="mydiv">我是div3</div>
<span>我是span</span>
</body>
</html>组合选择器
应用场景：如果页面不同的选择器想使用相同的css样式
语法格式：
选择器1, 选择器2... {
css代码
}
例如：
#div,p {
color:red;
}
关联选择器
关联选择器更加强调的是通过父亲查找孩子。
语法格式：
标签名 后代标签名 ｛
css代码；
｝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a span {
color: yellow;
font-size: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
让id为a的标签下的所有的span以同样的样式去显示 字体颜色黄色，50px字体大小，边框1px 实线 红色
关联选择器：父子关系
格式
父选择器 子选择器 {
css代码
}
-->
<div id="a">
<span>我是span1</span>
<span>我是span2</span>
</div>
<span>我是span3</span>
<span>我是span4</span>
<div>
<span>我是span5</span>
<span>我是span6</span>
</div>
</body>
</html>属性选择器
属性选择器是在原有选择器的基础上，通过标签的属性，再次对标签进行筛选
语法格式：
选择器名[属性名="属性值"] {
css样式；
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type="text"]{
border: 2px solid blue;
}
</style>
</head>
<body>
<!--需求：给页面所有input标签的type属性为text的标签加上一个边框：边框宽度2px, 实线, 蓝色框-->
文本框：<input type="text" /><br />
密码框：<input type="password" /><br />
文本框：<input id="txt" type="text" /><br />
密码框：<input type="password" /><br />
</body>
</html>CSS常用的样式
边框和尺寸：border、width、height
转换：display
在开发中，希望行内元素具有块元素的特性，需要使用display属性将行内元素转换成块级元素
语法结构：
选择器 {display : 属性值 }
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
字体：color、line-height
color： 颜色 字体颜色
line-height: 行高 设置行高
想让子元素在父元素里面左右居中显示
给父元素设置一个水平对齐“text-align”属性，text-align 属性规定元素中的文本的水平对齐方式：
text-align的取值：left、right、center
背景：background-color，background-image
语法格式：
background-color： 颜色; 设置元素的背景颜色
background-image : url(图片的路径地址);
background-repeat: 背景平铺方式;
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的
布局：float、clear
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
语法结构：
选择器 {
float : 属性值;
}
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
ps: float : left 是比较常用的布局方式
边框(盒子模型)
什么是盒子模型
我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。而盒子模型的组成跟我们生活中也是一样的：例如在淘宝上买东西，我们的商品和快递盒子之间可能是有距离的。而快递盒子之间也可能存是有距离的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
