css3.0(cascading style sheet) 层叠级联样式表
快速入门：
<!doctype html><html lang="en"><head> <meta chart="ut青年大学习第九季第七期答案f-8"> <meta name="viewport" content="width=devi关爱作文600字ce-width, initial-scale=1.0"> <title>css01</title> <style> h1 { color: red; } </style></head><body> <h1>标题一</h1></body></html>css的三种导入方式：
行内样式（优先级最高，但不建议这样写）：
<h1 style="color: red;">标题一</h1>
内部样式表（不建议这样写）quit过去式：
<head><style> h1 { color: red; } </style></head><body> <h1>标题一</h1></body>外部样式表（优先级最低，但实现了html与css的分离，推荐使用）：
h1 { color: red;}<head> <link rel="stylesheet" href="css/a.css"></head><body> <h1>标题一</h1></body>
3种基本选择器：
标签选择器（权重最低）类选择器id选择器（权重最高）/* 标签选择器，会选择所有h1标签 */h1 { color: red; background: #3cbda6; border-radius: 20px; font-size: 80px;}/* 类选择器，会选择所有类名为text-red的元素 */.text-red{color: red;}/* id选择器，会选择id为description的元素，id必须保证唯一 */#description{color: black;}<h1>标题一</h1><p class="text-red">content</p><span class="text-red">content</span><p id="description">some content</p>
/* 后代选择器 */body p{}/* 子选择器 */body>p{}/* 相邻选择器（弟弟选择器） */.active + p{}/* 通用选择器（所有弟弟选择器） */.active~p{}<body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <div> <p>p4</p> <p>p5</p> </div></body>
/* div中的第一个p元素 */div p:first-child{}/* div中的最后一个p元素 */div p:last-child{}/* div中的最后一个p元素 */div p:last-child{}<body> <p>p1</p> <p>p2</p> <p>p3</p> <div> <p>p4</p> <p>p5</p> <p>p6</p> </div></body>
/* class为demo中的所有a标签 */.demo a{}/* 存在id的a标签 */a[id]{}/* id为first的a标签 */a[id=first]{}/* href以http开头的a标签 */a[href^=http]{}/* href以pdf结尾的a标签 */a[href$=pdf]{}字体样式(字体，字体风格，字体大小，字体粗细，字体颜色)：font-family: 楷体;font-style:oblique;font-size: 40px;font-weight: boldcolor: #a13d30;font: italic bolder 12px "楷体";
文本样式（文本居中对齐，首行缩进两个字母，行高，文本装饰）text-align: center;text-indent: 2em;line-height:30px;text-decoration: underline;文本阴影（阴影颜色，水平偏移，垂直偏移，阴影半径）text-shadow: #3cc7f5 -5px 5px 2pxa标签去除下划线：text-decoration: none;
//默认属性a{text-decoration: none;color: #000000;}//鼠标进入a:hover{color: orange}//鼠标按住未松开a:active{color: green}//鼠标点击之后a:visited{color: red}//去除圆点list-style: none;//空心圆list-style: circle;//数字编号list-style: decimal;/黄褐斑的简单去除方法/正方形list-style: square;
//背景颜色background-color: blue//背景图片(默认是 repeat 平铺效果)background-image: url("");//水平平铺,垂直平铺,不平铺background-repeat:repeat-x;background-repeat:repeat-y;background-repeat:no-repeat;上下外边距为0，左右居中:margin: 0 auto;上下左右外边距为0:margin: 0;上下外边距为0，左右外边距为1px:margin: 0 1px;设置上左下右外边距:margin: 0 10px 1px 10px;上下左右内边距为10px:padding: 10px;上下内边距为0，左右内边距为10px:padding: 0 10px设置上左下右内边距:padding: 10px 10px 10px 10px
(图文详细)最通俗易懂的css 浮动float属性详解：
标准文档流： 元素默认自左往右，从上往下的流式排列方式。分为块级元素和行内元素
块级元素：display: block;block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。行内元素：display: inline;inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。是块元素，但可以内联（在一行）：display: inline-block;简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。元素不显示也不占用空间：display: none;
相对定位（相对自己原本的位置偏移，它原来的位置仍然被保留在标准文档流中）
相对自己原本位置上移20px，右移20px：position: relative;top: -20px;left: 20px;
绝对定位（它原来的位置脱离了标准文档流）
绝对定位 absolute 一般和 relative 搭配使用，绝对定位的元素会一层一层地寻找父元素，然后相对于 relative 父元素定位，否则相对于浏览器定位
<body> <div class="b g"> ll <div class="a r"> 最外面 <div class="s b"> 中间 <div class="ss y"> 最里面 </div> </div> </div> </div> <style> .b { height: 900px; width: 600px; position: relative; } .a { height: 500px; width: 600px; /* position: relative; */ } .s { height: 200px; width: 200px; position: absolute; right: 0px; bottom: 0px; } .ss { height: 50px; width: 50px; } .r { background-color: red; } .b { background-color: blue; } .y怎么练好字 { background-color: yellow; } .g { background-color: green; } </style></body>
固定定位（相对于浏览器定位，不随页面滚动而滚动）
<div class="ss g"></div> <style>.ss {height: 50px;width: 50px;position: fixed;top: 30px;right: 20px;} .g {background-color: green;}</style>z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）
设置元素透明度：
opacity: 0.5
到此这篇关于详解css3.0(cascading style sheet) 层叠级联样式表的文章就介绍到这了,更多相关css style sheet样式表内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 21:44:47，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e751ca5363fe1add2d9c0ff39a057f0c.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：详解CSS3.0(Cascading Style Sheet) 层叠级联样式表.doc
本文 PDF 下载地址：详解CSS3.0(Cascading Style Sheet) 层叠级联样式表.pdf
| 留言与评论（共有 0 条评论） |
