本文详细介绍了CSS相关知识，包括定义、语法、引入方式和选择器。阐述了CSS初级美化，如字体、文本、超链接等。还讲解了盒子模型、浮动、定位的使用，以及表格和表单的相关内容，最后提及表单数据请求的GET和POST方式。
@月月鸟
一、什么是css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
二、 css语法
// 选择器：选中要美化的元素
// 声明：就是要给选中的元素美化什么？美化成啥样？
选择器{
声明1; // 属性名:属性值;
声明2;
声明3
}
示例：要求将p标签内的字体颜色设置为红色
p{
color:red;
}
示例：
HTML中 标签都有特别的含义 我们如果想编写CSS代码就需要在特别的标签中使用
style标签是用来专门编写CSS样式代码的
规范来讲它需要放置在head标签内
<style>
h3{
/* 设置字体颜色为红色 */
color:red;
}
</style>
三、css 引入方式
- 行内样式表：直接在标签中通过
style属性设置样式，每一个HTML标签都有此属性
<!-- 行内样式表
优点：直接 直观
缺点：耦合导致阅读困难、它只能对单个标签设立样式
-->
<h3 style="color: red;">夏日绝句</h3>
- 内部样式表：在
head标签中添加style标签，然后编写完整的CSS语法。
<!-- 内部样式表 -->
<style type="text/css">
h3{
color: yellow;
}
</style>
-
外部样式表：
1本项目中的css文件 2公网的css链接(CDN加速)
<!-- 外部样式表 href:外部CSS文件地址(可以在你项目中 相对/绝对，也可以在其他服务器上) -->
<!-- [最常用]它是多种CSS引入方式中最常用的 它也是外部样式表引入的最常用的-->
两种方式：
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<style type="text/css">
/* CSS语法 用来引入外部样式文件时 如果出现不兼容CSS 2.x语法时 将无法使用 */
@import url("css/index.css");
</style>
三种引入方式的优先级：行内样式表优先级最高 > 内部样式表和外部样式表谁在后面谁优先级高(代码是由上而下执行的，后面的相同设置会覆盖前面的)
四、css选择器
CSS中有三大基本选择器：
- 标签选择器：标签名就作为一种选择器，表示给对应的标签统一设置样式。 例如：h3 p
/* 标签选择器 */
h3{
color: deeppink;
}
p{
font-weight: bold;
}
- 类选择器：需要借助标签的class属性 （应用最广泛的基本选择器）
/* 类选择器：.标签的class属性值 */
.poem{
font-weight: bold;
}
.hehe{
color: red;
}
<div>
<h3>夏日绝句</h3>
<!-- 如果应用多个类选择器 可以以空格隔开 -->
<p class="poem hehe">
生当作人杰，死亦为鬼雄。<br/>
至今思项羽，不肯过江东。
</p>
<p class="hehe">
呵呵
</p>
<p class="poem">
哈哈
</p>
</div>
- ID选择器：需要借助标签的id属性（不常用）
/* ID选择器 */
#poem{
color: greenyellow;
}
<!-- 严格来讲id选择器应该是唯一的 但是因为HTML是弱语法 所以你会发现ID选择器可以实现和类选择器一样的效果 -->
<p id="poem">
生当作人杰，死亦为鬼雄。<br/>
至今思项羽，不肯过江东。
</p>
基本选择器优先级(范围越小 优先级越高)：ID选择器 > 类选择器 > 标签选择器
- 层次选择器
1.后代选择器
E F 表示选择E选择器下的F选择器(包含后代)
div p{
}
2.子选择器
E>F表示选择E选择器下的F选择器(只会选择直接子元素)
div>p{
}
3.相邻兄弟选择器
E+F表示选择E选择器后紧挨着的F选择器内容
div+p{
}
4.通用兄弟选择器
E~F表示选择E选择器后的所有F选择器内容
div~p{
}
- 复合选择器
1.并集选择器
E,F 表示E和F选择器都被选
2.交集选择器(小心语法)
其他选择器 类选择器/ID选择器
例如：p.div(X)
p.active
/*1.使用并集选择器将p选择器和ul选择器的范围内背景颜色都设置为蓝色*/
/*p,ul{
background: green;
}*/
/*2.使用交集选择器将p选择器和.active选择器的范围内公共的交集部分颜色设置为蓝色*/
/*p.active{
background: red;
}*/
- 属性选择器
根据属性选择内容。
/*1.将所有拥有id属性的元素背景颜色设置为黄色*/
/*a[id]{
background: yellow;
}*/
/*2.将id属性值为first的元素背景颜色设置为红色*/
/*a[id=first]{
background: red;
}*/
/*3.将所有拥有class属性且属性值中包含links字符串的元素背景颜色设置为红色*/
/*a[class*=links]{
background: red;
}*/
/* 4.将所有拥有title属性并且属性值是以web开头的元素背景颜色设置为红色*/
/*a[title^=web]{
background: red;
}*/
/*5.将所有拥有title属性并且属性值是以site结尾的元素背景颜色设置为红色*/
a[title$=site]{
background: red;
}
五、css的初级美化
字体美化
- 字体类型：font-family
h3{
/*font-family: "楷体";*/
/*font-family: "宋体";*/
/*font-family: "\u5b8b\u4f53";*/
/* 如果这样设置是为了防止当前面的字体无法使用时 可以作为替换性内容 */
/* 一般会对中文和英文分别设置字体 */
font-family: tahoma, arial, "Hiragino Sans GB", "宋体", sans-serif;
}
- 字体大小：font-size
font-size: 16px;
- 字体的风格：font-style
h3{
/* 默认的 */
/*font-style: normal;*/
/* 采用字体原有的斜体设计 */
/*font-style: italic;*/
/* 采用固定的倾斜角度对字体倾斜 */
/*font-style: oblique;*/
}
- 字体的粗细：font-weight
p{
/*font-weight: bold;*/
/* 加粗 */
/*font-weight: 700;*/
/* 更细的 */
font-weight: lighter;
font-weight: normal;
}
- 一个字体属性设置所有字体样式：font
body{
/*font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;*/
/* font-size: 12px/（行高）line-height: 1.5; */
font: 12px/1.5 tahoma,arial,"\5b8b\4f53";
}
文本美化
- 文本颜色：color
p{
/* 可以使用关键字作为颜色值 */
/*color: orangered;*/
/* 可以使用16进制颜色值 */
/*color: #D3C294;*/
/* 配置三原色 红色 绿色 蓝色 */
/*color: rgb(255,0,0);*/
/*color: rgb(255,125,0);*/
/* alpha 透明度 0 - 1之间 值越大透明度越低 */
color: rgba(255,0,0,0.1);
}
- 文本对齐方式：text-align (必须保证要设置的对齐文字是处于块元素内的)
p{
/*text-align: left;*/
/*text-align: right;*/
/*text-align: center;*/
/* 两端对齐 */
/*text-align: justify;*/
}
块元素和行内元素
-
块元素：独占一行、可以设置宽度和高度等信息。例如：div p h1-h6…
-
行内元素：多个行内元素可以在一行展示内容，它不可以设置宽度和高度等信息，内容撑开宽度和高度。 a image span…
-
文本缩进：text-indent
p{
font-size: 16px;
/* 缩进 你根据字体大小计算缩进值 */
/* px是绝对单位 */
/*text-indent: 32px;*/
/* em是相对单位 它会以当前字体大小进行计算 */
text-indent: 2em;
}
- 文本行高：（行间距）line-height
line-height: 30px;
- 文本装饰：text-decoration
span{
/* 下划线 */
/*text-decoration: underline;*/
/* 上划线 */
/*text-decoration: overline;*/
/* 删除线：中划线 */
/*text-decoration: line-through;*/
/* 普通文字默认情况下为none */
text-decoration: none;
}
a{
/* 超链接标签默认文字拥有下划线 一般我们会对其进行下划线去除 */
text-decoration: none;
}
超链接美化
伪类选择器，可以应用其他的标签，但是常用于a标签。
选择器:伪类选择器名
示例： a:hover 当鼠标悬浮在超链接标签上时触发选中
- hover 可以设置鼠标悬浮在超链接上的样式
/* 鼠标悬浮其上时触发选中 */
a:hover{
text-decoration: underline;
color: orange;
}
- linked 可以设置超链接未点击前的样式(等价于标签选择器直接设置)
- visited 可以设置超链接被点击后的样式
- active 可以设置超链接被点击但还未释放的样式
鼠标美化
-
小手型指针
css /* pointer 小手 */ cursor: pointer; -
wait 加载中
-
help 帮助带问号
-
text 文本光标型
-
crosshair 十字型
-
default 默认光标样式
背景美化
- **背景颜色设置：**background-color
- **背景图片：**background-image
- 背景尺寸：background-size
- **背景平铺：**background-repeat
- **背景定位：**background-position
- 背景属性：background
background: url(img/arrow-right.gif) no-repeat 170px center;
css 列表
上一篇HTML基础有介绍
对于列表的样式设置，CSS有专门的属性。
ul{
/* 它其实是三个子属性的集合体 但是通常用它来去除列表前缀符号 */
list-style: none;
/*list-style: amharic;*/
}
六、 盒子模型
什么是盒子模型
box盒子
它是抽象于现实生活中的盒子，将网页中的所有元素看做是一个个的盒子，那么在调整网页中的这些元素布局时，就可以通过调整盒子信息来进行。
盒子模型的组成：盒子内容 + 盒子的内边距(盒子内容到边框的填充) + 盒子边框 + 盒子外边距
盒子模型的使用
1.边框
-
border-style 边框样式
css /*border-style: solid;*/ /*border-style: dotted;*/ /*border-style: dashed;*/ border-style: double; -
border-color 边框颜色
css /*border-color: green;*/ /*border-color: #008000;*/ border-color: rgb(255,0,0); -
border-width 边框粗细
css border-width: 1px; -
上方的样式直接设置多个值可以表示不同的方向
```css /* 所有的 */ /*border-color: red;*/ /* 上下 左右 */ /*border-color: red green;*/ /* 上 左右 下 */ border-color: red green yellow; /* 顺时针：上右下左 */ /*border-color: red green black pink;*/ ```
上方的边框样式，还可以和我们的CSS方向关键词结合，用于对不同方向的边框进行样式设置。
例如：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- …
另外CSS还给提供了统一的边框设置方式：
```css
/* 可以同时设置颜色、粗细、样式 */
border: 1px solid red;
上方的样式设置如果和方向关键词结合，还可以对某个方向的所有边框样式进行设置。
例如：
- border-top：1px solid red;
- border-bottom：xxx;
2、内边距
padding(填充)：它可以调整边框到元素内容的距离。
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding：它可以统一设置不同方向的距离
padding(填充)：它可以调整边框到元素内容的距离。
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding：它可以统一设置不同方向的距离
外边距
margin：设置元素的外边距，也就是和其他元素之间的距离
- margin-top
- margin-ritght
- margin-bottom
- margin-left
- margin
尺寸
box-sizing：设置盒子模型尺寸计算规则的。
- content-box(默认值)：计算盒子尺寸时，只计算盒子元素内容，不包括内边距和边框。
- border-box：计算盒子尺寸时，不止计算盒子元素内容，还包括内边距和边框。(大小一共就那么大，所以到时候会调整元素内容的空间)
标准文档流调整-display
默认情况下，在标准文档流中，元素是分为两大类的。
- 块元素：
独占一行，拥有完整的盒子模型设置 - 行内/内联元素：如果有多个内联，会排在一行，且盒子模型不完整。它的大小主要由内容撑开。
实际上之所以出现这种效果，就是因为dispaly属性，块元素默认为block，而内联元素默认为inline。
如果想将块元素和内联元素进行转换，可以通过此属性。
display：
- none 隐藏
- block 块元素的默认值
- inline 内联元素的默认值
- inline-block 行内块元素 (但是有不可控的间隙)
七、浮动
**float：**能够实现块元素在一行并列布局展示。
- none 默认值
- left 左浮动
- right 右浮动
浮动引起的父级边框塌陷问题：
当浮动出现后，会导致：
-
兄弟元素受到浮动影响，导致显示错乱
- 可以通过
clear清除浮动，解除浮动影响。
- 可以通过
-
如果都浮动了，父级元素会产生边框塌陷
-
利用添加空子元素解决
在父级元素最后添加一个子元素，然后将其清除两侧浮动。
-
和上方一致的思路(推荐)：因为上方还需要添加一个空子元素 麻烦
-
css
/* 表示在元素最后面设置信息 */
.father:after{
/* 给标签添加内容 */
content: "";
display: block;
clear: both;
}
-
设置父级高度(变通玩法 )(不推荐)
-
利用overflow(溢出)特性
当overflow设置的标签没有设置高度时，会自动跟随溢出元素进行高度适应
八、 定位
position：定位
-
static 默认的
-
relative 相对的
设置它，会保留原有的位置，然后通过方向调整可以定位位置，但是它的定位偏移是相对于原来的位置
-
absolute 绝对的
设置它之后，原有位置会消除，但是它默认会保留在原有位置上方，它后面的元素会向上偏移。
使用方向调整，默认情况下会相对于浏览器边框进行偏移，
当然如果它的某一级父元素设置过定位，则会相对于父级元素偏移。
往往它会结合着relative使用
-
fixed 固定的
“狗皮膏药” 固定定位
九、表格
上一篇HTML 基础 有介绍
十、 表单
表单是由一系列表单元素，例如输入框、单选按钮、复选框、下拉框等组成的用于方便用户填写信息的一种数据填写方式。
表单基本语法
<!-- 最通俗的表单形态：form表单 -->
<!--
action：表单数据提交地址
method：请求的方式(HTTP请求的请求方式) 默认请求方式为GET
GET POST [PUT DELETE HEAD ...]
-->
<form action="" method=“”>
表单元素们
</form>
常见的表单元素
<!--
type：类型 表示input表单的类型 (默认值为text 表示文本输入框)
name：目前了解 只要你想要将此表单填写的数据传输到后台 必须要写此属性！！！！
value：表单默认的值
可选/不常用属性：
maxlength：允许输入的最大字符长度
size：设置输入框的长度 取值范围[1,7]
下面仨往往用于type=number输入框
max：输入的最大值
min：输入的最小值
step：步进 默认为1 例如：1 2 3 4 5 6 如果改为2则变为了1 3 5 7 9
-->
<input type="" name="" value="" maxlength="" size="" max="" min="" step=""/>
- 文本输入框
type="text" - 密码输入框
type="password"输入内容将变为实心圆点 - 单选按钮
type="radio"
性别：
<!-- 我们希望 单选按钮在性别需求上实现互斥效果 -->
<!-- name除了作为关键的数据传输作用之外 还承担可以实现单选按钮的互斥效果 -->
<!-- checked 默认选中 -->
<input type="radio" name="gender" value="" checked /> 男
<input type="radio" name="gender" value="" /> 女
- 复选框
type="checkbox" - 文件域
type="file"可以显示出一个文件选择按钮 - 按钮
- 普通按钮
- 提交按钮
- 图片提交按钮
- 重置按钮
<!-- 未来要结合js使用 -->
<input type="button" value="普通按钮" />
<br/>
<form action="success.html">
用户名：<input type="text" name="username" value="张三" />
<!-- 提交表单 -->
<input type="submit" value="提交"/>
<!-- 效果等同于提交按钮 但是可以设立图片 -->
<input type="image" src="login.gif" />
<!-- 重置按钮 可以恢复为表单初始的状态 -->
<input type="reset" value="重置" />
<!-- button系列的按钮 -->
<!-- 默认效果和提交按钮一样 -->
<button type="submit">提交按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置</button>
</form>
-
时间输入框
type="date" -
数值输入框
type="number" -
列表框
<select name="">
<!-- 下拉列表项 -->
<!-- selected默认被选中 -->
<option value="">xxx</option>
</select>
- 文本域
<!--
cols控制列数
rows 控制行数
文本域的标签内写的内容就是它的value属性值
style：resize:none; 可以取消可缩放效果
-->
自我介绍：<textarea name="" cols="" rows="" style="resize: none;">121</textarea>
注意：在使用浏览器预览我们的页面内容时，小心它自带的缓存功能，如果发现正确更改了代码，却并没有显示出预期的效果，记得要排除此问题。Ctrl+F5强制刷新 (Ctrl+Fn+F5)
表单的高级应用
- 增强鼠标可用性的小标签
性别：
<input id="male" type="radio" name="gender" />
<!-- for属性用来关联表单元素的id属性 -->
<label for="male">男</label>
<input id="female" type="radio" name="gender" />
<label for="female">女</label>
- 隐藏域：它不会显示出来，但是如果绑定好name和value可以作为隐藏的数据传递
<input type="hidden" name="token" id="token" value="ee3322xx" />
- 禁用
<!-- 禁用 -->
<input type="button" name="" id="" value="普通按钮" disabled />
- 只读
<!-- 只读 -->
<input type="text" name="" id="" value="只能看不能摸" readonly />
数据请求
GET和POST请求的基本区别：
- GET请求方式：
它在进行数据传输的时候 会采用URL地址后?+数据键值对(name=value) 键值对以&分隔
success.html?username=%E6%A2%81%E6%B6%9B&pwd=123456&gender=on&city= - POST请求方式：
它会通过请求体来传输数据 不会在地址栏显示请求数据 所以相对安全
以上内容可能会有出入，仅供参考，部分出自转载，欢迎大家踊跃留言指正
扫一扫
2684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
