|
阅读：2921回复：0
2023.1.13 CSS<!-- CSS：cascading Style Sheets --> CSS代码书写规范： 1、样式格式书写 （1）：紧凑风格： （2）：展开风格：规范的开发风格 2、小写字母 3、空格规范：属性前面，冒号后面保留空格，选择器（标签）空格 <!-- 选择器的分类： --> 1、基础选择器：由单个选择器组成： 标签选择器：又叫元素选择器，把同一个标签全部选择，无差别对待，使用较多：p { style= color: red;}(紧凑风格) p { style="color: red;" }展开风格：规范的开发风格 类选择器:可以单独或者某几个标签,结构需要class属性调用，使用非常多： . color { style= color: red; } 多类名：一个标签有多个名：不同类名中间用空格分开<div class="name1 name2 name3"></div> id选择器：与元素中ID一起使用，CSS中id选择器以"#"来定义。样式通过#定义，结构ID调用，只能调用一次，别人不能使用，一般和js搭配 # color { style= color: red; } 通配符选择器：在CSS中使用“*”定义，表示选择页面所有元素。 * { style= color: red; } 2、复合选择器 由基本选择器进行组合形成： 后代选择器：重要！ ol li a{ ... } 子选择器：重要！ 只能选择作为某元素最近一级的子元素。 并集选择器： div,p a,span { .... } 伪类选择器： 用冒号（：）表示：如a标签的： a:link 选择所有未被访问的链接 a:visited 选择所有已被访问的链接 a:hover 选择鼠标指针位于其上的链接 a:active 选择活动链接（鼠标按下未弹起的链接） 伪类链接的声明顺序：:link-:visited-:hover-:active focus伪类选择器：选取获得光标的表单 input:focus { background-color: yellow; } <!-- 文本属性 --> 对齐文本：text-align: <!-- CSS引入方式 --> 1、行内式（行内样式表） 直接在标签内部进行：<div style="color: red;">行内式</div> 2、嵌入式（内部样式表） 将CSS代码抽取出来放在同一的<style></style>标签中，<style></style>在<head></head>里面。 3、链接式（外部样式表） <link rel="stylesheets" href="./CSS.css">引用样式表单，工作中一直用的 <!-- Emmet语法： --> 1、快速生成HTML结构语法; 生成标签：直接输入标签名按tab键，多个标签就div*10+按tab键，就是10个div标签。 如果有父子集标签：用>： ul>il。按tab键 如果有兄弟集标签：用+： div+p。按tab键 生成带有类名或者ID名字的：直接写.#+tab键 .demo$*5+tab键 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> div{哈哈哈哈}+tab键 <div>哈哈哈哈ha</div> 2、快速生成CSS样式语法： <!-- CSS的元素显示模式 --> 1、块元素 div h p ul 独占一行，默认宽度是容器宽度（父级宽度）100%，高宽边距都可以控制，是一个容器 2、行内元素 span img input a 可以同在一行，高宽直接设置无效，默认宽度就是它本身的宽度，行内元素只能容纳文本或者其他行内元素 3、行内块元素 img input td 可以同在一行，高宽可以直接设置 <img src="../../../作业/一阶段/2022.10.26高钰翔作业/images/小米手机图片2-7.webp" height="100px"> 4、元素显示模式转换 比如想增加a的触发范围 display:block:转换为块元素 display:inline:转换为行内元素 display:inline-block:转换为行内块元素 <!-- CSS背景图片的位置： --> 利用background-position属性可以改变图片在背景中的位置。 background-position: 方位名词 top center; ；前后两个名词顺序无要求 background-position: x y 20px(x) 50px(y); 位置坐标和位置名词可以混用 <!-- 背景图像固定（背景附着） --> background-attachment属性设置背景图像是否固定，或者随着页面的其余部分滚动。后期可以制作视差滚动效果 background-attachment: scroll滚动 | 和 fixed固定 背景复合写法： background：red url(images/图片1.jpg) no-repeat(平铺) fixed top; |
|
公众号
