南阳网站建设赛科虚拟主机搭建网站
CSS
CSS概述:
CSS是Cascading Style Sheets（级联样式表）,是一种样式表语言,用于控制网页布局,外观(比如背景图片,图片高度,文本颜色,文本字体,高级定位等等)
可将页面的内容与样式分离开,样式放于单独的.css文件或者HTML某处
CSS是网页样式,HTML是网页内容
基本语法-行内样式表
行内样式表 , 又有人称内联样式、行间样式、内嵌样式。是通过标签的 style 属性来设置元素的样式，其基本语法格式如下：
< 标签名 style=" 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名>
基本语法-内嵌样式表
内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title>.<style>/* css是样式表语言，将内容与样式分离开 *//* 类选择器 */.p1{color: aquamarine;}<!-- 标签选择器 -->a{color: aqua;}/* id选择器 */#aid{color: blueviolet;}/* 通配选择器 */*{color: blue;}/* */</style></head><body><!-- 导入外部样式表 --><link href="css/wai.css"/> <!-- 行内样式表优先级最高 --><a style="color: aliceblue;" id="aid" class="p1"></a></body>
</html>
基本语法-外部样式表
外部样式表是将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通
过 link 标签将外部样式表文件链接到 HTML 文档中
文本&背景
直接看代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: aliceblue;font-size: 10px; /* px像素单位*/font-family: 楷体;font-weight: 200;/*加粗*/text-align: center;/*水平文字对齐*/font-style: initial;/*字体 例如：斜体*//* text-decoration: underline; 修饰文本添加下滑线 line-height: 50px; 行高letter-spacing: 20px; 字符间距word-spacing: 20px; 单词间距text-indent: 2em; em当前文本中一个字符的大小 缩进量2em*//* background-repeat: repeat; */background-color: aqua;background-size: 250px;/* background-position-x: 250px; */background-image: url(img/img/grape.jpg);}a{text-decoration: none;}a:hover{text-decoration: underline;color: #}</style></head><body><p class="p1"></p></body>
</html>CSS列表属性
CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志
CSS伪类
css伪类专门用来表示标签的一种特殊状态,当我们需要为这些特殊状态的标签设置样式时,就可以使用伪类
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
<style>/* 鼠标移入改变 */a:hover{color: red;}/* 点击改变 */a:active{color: aqua;}/* 向拥有键盘输入焦点的标签添加样式 */.btn:focus{color: red;}.te{background-color: blue;color: aqua;}</style></head><body><a href="" >百度</a><input type="text" class="te"/><br /><input type="button"/ value="保存" class="btn"></body>
</html>透明
定义透明效果的属性是 opacity 。
opacity 属性设置标签的不透明级别 值为 1 。
规定不透明度：从 0.0 （完全透明）到 1.0 （完全不透明）
块级标签/行级标签/行级块标签
Display
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签 p h1-h6 div 特点:自动占一行,可以放置任何标签,可以设置宽高--><!-- 行级标签a b s font 特点是设置宽高无效,不会自动占一行作用:对网页中的文字进行选中修饰--><span style="color: blue; height: 60cm; width: 20cm; display: none;">hello</span><!-- div span都是纯净版标签--><div style="color: aqua; height: 200px; width: 600px; display: inline;" >div</div><!-- 行级块标签,不占一行又可以设置宽高 input image--><!-- 通过display样式可以修改标签的类型可选值：block ：设置标签为块标签inline ：设置标签为行级标签inline-block ：设置标签为行级块标签none ：隐藏标签（标签将在页面中完全消失）--></body>
</html>div是"纯净的"块级标签,span是"纯净的"行级标签 纯净=没有任何附加功能
盒子模型
盒子模型
css中每一个标签都像一个盒子,网页布局本质就是摆放盒子
每一个又分为了四个区域
内容区:放内容的区域
内边距:内容区到边框的距离
边框:标签的最外层
外边距:一个标签距离另一个标签的距离
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: red;width: 300px;height: 20px;/* 设置内边距 */padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;}.sz{padding-top: 15px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: aqua;}</style></head><body><!-- 盒子模型每一个标签都像一个盒子,网页布局本质就是摆放盒子每一个又分为了四个区域内容区:放内容的区域内边距:内容区到边框的距离边框:标签的最外层外边距:一个标签距离另一个标签的距离--><div class="box">盒子模型</div><div class="sz" style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png" /></div></body>
</html>盒子模型-内容区-content
盒子模型-内边距-padding
盒子模型-边框-boeder
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.text{border-color: red;border-radius: 15px;border: 2px red solid;padding: 15px;}.text:active{color: blueviolet;}.text:hover{color: aqua;}.p11:hover{color: blue;}</style></head><body><a href="" class="p11">百度</a><input type="text" class="text"/></body>
</html>盒子模型-外边距-margin:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 清除浏览器默认格式 *//* *{padding: 0px;margin: 0px;} */.z1{border: 60px;margin: 10px auto;padding-left: 600px;color: red;}</style></head><body><div class="z1">盒子模型</div><div class="z1" style="width: 300px;height: 70px; display: block;"><img src="img/wemeet image_20240602143005399.png" /></div></body>
</html>清除浏览器的默认样式:
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设置了一些默认的margin 和 padding ，而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。
代码:
*{
margin: 0;
padding: 0;
}
文档流
文档流指的是文档中的标签在排列时所占用的位置,
将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流
浮动
当一个标签浮动后,其原本下方的标签会上移
浮动会使标签完全脱离文档流,也就是不再在文档流中占用位置,这时不会再影响父标签的高度,也就是浮动标签 不会撑开父标签
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nac{background-color: aqua;float: left;padding: 10px 20px;}.nax_box{/* 大小不够就效果错误 */width: 600px;margin: 10px auto;}</style></head><body><!-- 浮动会使标签脱离原来的文档流(二维平面) ,悬浮起来float:left浮动后不占用原来的二维空间,会影响后续布局--><div class="nax_box"><div class="nac">新闻首页</div><div class="nac">新闻联播</div><div class="nac">娱乐至死</div><div class="nac">加沙新闻</div><div style="clear: left;"></div> <!-- 清除浮动 --></div><div>assd</div></body>
</html>运行结果:
CSS定位(position)
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置
相对定位和绝对定位
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位