当前位置：首页 > news >正文

css的应用

news 来源：原创 2024/9/28 21:07:07

css是一种样式表语言,为html标签修饰定义外观,分工不同

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="css/demo.css" rel="stylesheet"/><style>/*cssx注释内嵌样式表*//*标签选择器*/a{color: mediumaquamarine;}/*类选择器*/.p1{color: red;}/*通配选择器 选中所有标签*/*{color: black;font-size: 24px;}/*id选择器*/#aid{color: blueviolet;i}</style></head><body><!--行内样式表，只能对所在标签进行修饰，优先级最高--><!--优先级：行内样式表>id选择器>类选择器>标签选择器>通配选择器--><a class="p1" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a><a class="p2" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a><a href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a><a id="aid" href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a><a href="https://aqtw.qq.com/" target="_blank" style="font-family: 楷体;">启动</a></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: aqua;/*字体颜色*/font-size: 24px;/*字体大小*/font-family: 楷体;/*字体格式*/font-weight: 200;/*加粗*/text-align: center;/*文字水平对齐*/font-style: italic;/*斜体文本*/text-decoration: underline;/*修饰文本下添加下划线*/text-decoration: line-through;/*修饰文本，添加删除线*/line-height: 50px;/*设置行高*/word-spacing: 20px;/*英文单词间距*/text-indent: 20px;/*缩进字体间距*/}a{text-decoration: none;}a:hover{text-decoration: underline;color: #00aa7f;}</style></head><body><p class="p1">就一个区域,拥有许多输入和选择组件,让用户可以输入选择信息最终将数据提交到服务器</p><a href="">启动</a><a href="">启动</a><a href="">启动</a></body>
</html>

设置背景

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{background-color: aqua;/*背景颜色*/background-image: url(img/pear.jpg);/*添加背景图片*/background-repeat: no-repeat;/*背景不重复*/background-position: center;/**/background-size: 400px 400px;width: 800px;height: 600px;}</style></head><body><p>你好</p></body>
</html>

列表

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.u1 li{color: aqua;list-style-type: none;list-style-image: url(img/pear.jpg);list-style-position: inside;/*图标位置 是在列表里面还是列表外面  outside*/list-style: url(img/pear.jpg) outside none;}</style></head><body><ul class="u1"><li>你好</li><li>你好</li><li>你好</li><li>你好</li></ul><ul class="u2"><li>你好</li><li>你好</li><li>你好</li><li>你好</li></ul></body>
</html>

css伪类

● CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状

态的标签设置样式时，就可以使用伪类。

● 伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.a1:hover{color: aqua;font-size: 24px;}.a2:active{color: red;font-size: 24px;}.a3:active{background-color: blue;}p:hover{color: chocolate;background-color: beige;}input:focus{background-color: aqua;color: brown;}img:hover{opacity: 0.5;weight:400px;height: 400px;}img{opacity: 1;weight:400px;height: 400px;}</style></head><body><a class="a1" href="">启动</a><a class="a2" href="">启动</a><br /><p>你好</p><input type="button" value="保存" class="a3"/><br /><input /><br /><img src="img/IP.jpg"/></body>
</html>

透明

● 定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别值为1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>img:hover{opacity: 0.5;weight:400px;height: 400px;}img{opacity: 1;weight:400px;height: 400px;}</style></head><body><img src="img/IP.jpg"/></body>
</html>

块级，行级，行级块标签

块级标签：无论内容多少，都会独占一行可以设置宽高主要用来设计网页布局

行级标签：只占自身大小的标签，不会占一行设置宽高也无效主要对网页的文字进行修饰

行级块标签：不占一行，又可以设置宽高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--块级标签：无论内容多少，都会独占一行可以设置宽高主要用来设计网页布局例如 p，h，uldiv--是一种块级标签，没有任何的附加样式，给他设计什么样式就可以有什么样式--><p style="background-color: aqua; width: 200px; height: 200px;" >你好</p><div style="background-color: aqua; width: 200px; height: 200px; margin-top: 10px;"> 标签是一种纯净版的块级标签</div><!--行级标签：只占自身大小的标签，不会占一行，设置宽高也无效例如：a，b，s，i主要对网页的文字进行修饰span标签span是行级标签span 没有任何附加功能，给了什么属性就能变成什么样。span标签被用来选中文档中的文字。--><a href="" style="width: 200px; height: 100px;">启动</a><span style="color: aqua; font-style: inherit; text-decoration: underline;">span是一种纯净版的行级标签</span><!--常用标签a,span,div,表格，表单--><!--行级块标签：不占一行，又可以设置宽高例如 img input--><img width="100" height="100" src="img/IP.jpg"/><input style="width: 400px; height:15px;"/></body>
</html>

Display

● 通过display样式可以修改标签的类型。

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!--p本来是块级标签，独占一行，使用display:inline 将它设置为行级标签--><p  style="background-color: aqua; width: 200px; height: 200px; display: inline; " >你好</p><div style="background-color: aqua; width: 200px; height: 200px; margin-top: 10px; display: inline;"> 标签是一种纯净版的块级标签</div></body>
</html>

盒子模型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aqua;/*width和height只是设置内容区的大小，不是标签的大小*/width: 100px;height: 100px;/*设置内边距*/padding-top: 10px;上padding-bottom: 10px;下/*padding: 10px 20px 15px 20px  上右下左*/;/*padding: 15px 20px;上下 左右 *//*内容大小=内容区+内边框+边框*//* 设置外边距margin: 300px 600px;上下 左右*/}</style></head><body><!--盒子模型每个标签都像一个盒子，网页布局其本质就是摆放盒子每个盒子又分成了4个区域：内容区：放内容的区域内边框：内容区到边框的距离边框：标签的最外层外边框：一个标签距离另一个标签之间的距离--><div class="box">盒子模型</div><div class="box">新闻热点</div></body>
</html>

文档流

● 文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分

成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

● 也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不

足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

● 这样一来每一个块标签都会另起一行，那么我们如果想在文档流中进行

布局就会变得比较麻烦

定位

相对定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: relative;/* 开启了相对定位   只开启了相对定位，不设置偏移，标签不会变化 */left: 100px;/* 相对定位是以自身的位置为参照物定位的，不会让标签脱离文档流 */}.box1{background-color: green;width: 100px;height: 100px;}</style></head><body><div class="box1">div1</div><div class="box2">div2</div></body>
</html>

绝对定位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: absolute;/* 开启了绝对定位，立即脱离文档流 */left: 100px;/* 移动时的参照物：离他最近的 开启了定位的父级标签，如果所有的父级标签都没有开启定位，那么他以浏览器的边框为参照物。一般情况开启另一个标签的绝对定位，都会开启父级标签的相对定位*/}.box1{background-color: green;width: 100px;height: 100px;}.main{width: 200px;height: 200px;background-color: beige;position: relative;}</style></head><body><div class="main"><div class="box1">div1</div></div><div class="box2">div2</div></body>
</html>