查询网站备案密码是什么样的wordpress轻社区模板

查询网站备案密码是什么样的,wordpress轻社区模板,公司经营范围 网站开发,最热门网页游戏排行榜文章目录 一、CSS简介1. CSS介绍2. CSS三大特性3. CSS位置分类1. 内联样式表#xff08;行内样式表#xff09;2. 内部样式表3. 外部样式表二、CSS选择器1. 基础选择器#xff08;1#xff09;类型选择器#xff08;2#xff09;类选择器#xff08;3#xff09;id选择…文章目录一、CSS简介1. CSS介绍2. CSS三大特性3. CSS位置分类1. 内联样式表行内样式表2. 内部样式表3. 外部样式表二、CSS选择器1. 基础选择器1类型选择器2类选择器3id选择器4类选择器和id选择器的区别5通配符选择器2. 关系选择器1后代选择器2子代选择器3邻接兄弟选择器4通用兄弟选择器3. 分组选择器4. 伪类选择器1状态伪类1. 链接伪类2. 用户行为伪类2结构伪类3表单伪类5. 伪元素选择器1.选择特定部分2. 插入内容6. 属性选择器三、CSS文本样式1. 字体样式1字体颜色 color2字体族 font-family3字体大小 font-size4字体风格font-style5字体粗体 font-weight6字体装饰 text-decoration2. 文本布局1文本对齐 text-align2首行缩进 text-indent3文本字符间距 letter-spacing4行高 line-height5font简写总结一、CSS简介1. CSS介绍CSS的核心是控制视觉表现。CSS (Cascading Style Sheets层叠样式表。是用来控制网页在浏览器中的显示外观的语言。CSS3现在已被大部分现代浏览器支持而下一版的 CSS4 仍在开发中。HTML是结构用于展示内容CSS是样式用于设置网页的样式及布局。2. CSS三大特性继承性子元素继承父元素样式主要是继承跟文字相关的样式层叠性后面样式会覆盖前面样式主要解决样式冲突问题但是要看选择器权重来确定优先级优先级优先级由选择器的权重决定权重高的规则覆盖权重低的规则。3. CSS位置分类1. 内联样式表行内样式表样式写到标签内部可以控制当前标签的样式特殊情况使用。p stylecolor:red; font-size:14px;文字内容/p2. 内部样式表写到head 标签中脱离结构可以控制当前页面的所有标签较为常用。3. 外部样式表单独新建一个CSS文件完全脱离结构可以控制整个网站的所有标签最常用link relstylesheet href./css/index.css二、CSS选择器CSS选择器是CSS规则的第一部分。它是选择HTML元素的方式。CSS属性采用键值对形式。属性名属性值。CSS选择器选择标签CSS属性修改样式。1. 基础选择器基础选择器指的是由单个选择器组成常见的有:1类型选择器类型选择器选择某个类型的元素也称为标签选择器p { color: gold; }CSS 层叠性CSS 规则可以同时作用于一个元素浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。原则后定义的样式覆盖先前的样式。就近原则2类选择器类选择器选择某一个元素或者多个元素。1. 类名自定义不能是中文、纯数字2. 多个英文单词组成尽量使用 - 链接3. 命名有要意义尽量见名知义4. class属性可以有多类名中间用空格隔开3id选择器选择HTML中具有特定的id属性的唯一元素4类选择器和id选择器的区别a. 类选择器语法以 . 开头后跟类名如 .nav作用选择 class 属性的一个或多个元素特点可以使用多次类似身份证的名字可以使用多次场景后期修改样式基本都是类选择器b. id选择器语法以#开头后跟id名如 #header作用选择 特定 id 属性的唯一元素特点同一页面中id 值必须唯一不能重复类似身份证的编号唯一只能用一次场景后期主要是配合JavaScript 添加交互效果5通配符选择器通配符选择器可以选择 HTML 中所有的标签进行样式修改* { margin: 0; /* 去除外边距 */ padding: 0; /* 去除内边距 */ box-sizing: border-box; /* 统一盒模型 */ }特殊情况下通过通配符清除所有元素的默认边距和填充统一不同浏览器的默认样式。2. 关系选择器关系选择器是通过位置关系来选择目标元素(标签可以更精准选择某些元素。常见的有1后代选择器选择某个元素的后代元素不限层级包括子元素、孙元素等说明选择div标签里面的p元素中间空格隔开。父级div作用是限定子元素p修改样式。父级和子集都可以是任意选择器。2子代选择器选择某个元素的直接子元素选择div标签里面的第一层span元素中间隔开 理解为亲儿子3邻接兄弟选择器紧邻的的下一个同级元素h2p { color: pink; }选择紧跟着h2后面的第一个p元素4通用兄弟选择器选择之后的所有同级元素h2~p { color: pink; }选择紧跟着h2后面的所有p元素3. 分组选择器是将不同的选择器组合在一起。使用逗号分割。 也称为并集选择器。div span { color: red; }使用场景1. 多个元素具备相同样式。4. 伪类选择器选择元素的特定状态或结构位置符号是冒号(:)1状态伪类根据用户交互或状态变化选择。比如鼠标经过链接、表单获得焦点等。1. 链接伪类链接伪类用于根据链接的不同状态如未访问、悬停、点击等为其添加样式从而提升用户体验和界面交互性。a:link 未访问链接的默认样式a:visited 已访问链接的样式a:hover 鼠标悬停在链接上时的反馈a:active 链接被点击时的瞬时状态按下到松开/* 链接伪类 */ /* 未访问链接 */ a:link { color: #000; text-decoration: none; } /* 已访问链接 */ a:visited { color: orange; text-decoration: none; } /* 鼠标悬停链接 */ a:hover { color: red; text-decoration: underline; } /* 被点击的状态 */ a:active { color: blue; text-decoration: none; }使用场景1. 设置链接不同状态的样式。2. 用户行为伪类用户以某种方式和文档交互的时候应用这些用户行为伪类有时叫做动态伪类:hover 鼠标经过元素:focus 获得焦点的元素表单/* :hover 鼠标经过伪类 */ .box { width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; } .box:hover { background-color: red; color: #fff; } .search { width: 100px; height: 20px; /* transition: .5s; */ } /* :focus 获得焦点伪类 */ .search:focus { background-color: red; width: 200px; }使用场景1. 鼠标经过元素的时候修改样式。2. 表单获得焦点的时候2结构伪类根据元素的位置选择目标元素。:first-child 一组兄弟元素中的第一个元素:last-child 一组兄弟元素中的最后一个元素:nth-child(n) 一组兄弟元素列表中第n个元素n 的取值可以是数字。 从1开始关键字。 odd 奇数 even 偶数公式nth-child(3n) 3的倍数第3.6.9...个元素nth-child(n2) 第2个以及以后的元素nth-child(-n3) 前面3个元素注意公式的n取值从0开始计算/* 选择第一个小li */ .ul1 li:first-child { color: red; }使用场景1. 选择第1个或者最后一个或者第n个元素。3表单伪类针对表单元素的状态。:disabled 表单禁用:checked 选中状态单选复选按钮/* 表单禁用伪类选择器 */ button:disabled { /* background: #ccc; */ /* 透明度让整个按钮透明 0~1 */ opacity: .4; } /* 表单被选中伪类选择器 */ input:checkedlabel { color: #ff6900; }使用场景1. 表单按钮禁用的时候调整颜色。2. 复选框选中修改样式5. 伪元素选择器选择元素的特定部分使用双冒号 ::1.选择特定部分::first-line 选择首行::first-letter 首字母::placeholder 选择input或者textarea占位符/* 选择首行 */ p::first-line { color: #ff6900; } /* 选择首字母 */ p::first-letter { color: red; font-size: 28px; } textarea { color: pink; font-size: 14px; } textarea::placeholder { color: red; font-size: 12px; }使用场景1. 让表单里面的placholder文字变颜色。2. 做很多的修饰效果。2. 插入内容::before 元素内插入伪元素作为第一个元素::after 元素内插入伪元素作为最后一个元素/* before和after伪元素 */ div::before { content: 开始; color: red; } div::after { content: 结束; color: red; }注意before和after 是插入的伪元素特性类似内联元素。content属性是必须不能省略没有内容空引号即可。后期非常常用。6. 属性选择器根据元素的属性特征来精准定位元素从而实现更灵活的样式控制[属性] 匹配包含指定属性的元素[属性值] 匹配属性值等于指定值的元素[属性^值] 匹配属性值以指定字符串开头的元素[属性$值] 匹配属性值以指定字符串结尾的元素。[属性*值] 匹配属性值任意位置包含指定子串的元素a { color: #000; text-decoration: none; } /* 属性选择器 */ /* 1. 选择包含属性 */ a[class] { color: red; } /* 2. 选择属性等于值 完全匹配 */ a[classfont] { color: red; } /* 3. 选择属性值以xx开头 */ a[class^font] { color: red; } /* 4. 选择属性值以xx结尾 */ a[class$t14] { color: red; } /* 5. 选择属性值包含xx */ a[class*font] { color: red; } input[typetext], input[typepassword] { /* 去掉轮廓线 */ outline: none; }使用场景1. 表单样式控制。2. 图标字体控制.3. 国际化语言适配等等三、CSS文本样式CSS 文本样式用于控制网页中文字的外观包括字体、颜色、对齐、间距等主要分为两大类注意 文字是无法直接通过CSS来更改样式的必须要用适合的标签来包裹它们本质是修改标签样式里面文字跟随样式变化1. 字体样式1字体颜色 color最常见的颜色指定方式使用关键字、十六进制值和 rgb() 值。学习可以用关键字开发用十六进制特殊情况用rgb关键字这些颜色通常不会在生产环境的网 站中使用主要学习使用。 比如red、green、blue、pink等。.pink { color: pink; }十六进制这个是开发最常用的。实际开发中我们从设计稿直接复制即可。 比如红色 #FF0000 或者 #F00。.color16 { /* color: #f00; */ color: #2CB5A5; }rgb格式rgb() 函数接受三个参数分别表示颜色的 红、绿和蓝。也是设计稿复制的比如红色 rgb(255,0,0) 另有rgba(255,0,0, 0.3) 文字透明 最后一个数值取值 0~1 0完全透明 1 完全不透明.rgb { color: rgb(255, 0, 0); } /* 半透明 0是完全透明 1是完全不透明 */ .rgba { color: rgba(255, 0, 0, .5); background-color: green; }2字体族 font-family给定一个有先后顺序的由字体名或者字体族名组成的列表来为选定的元素设置字体.font { font-familyHelvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif }属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。3字体大小 font-sizeCSS 像素CSS Pixel 是 CSS 中用于定义长度、尺寸的单位简写为 px/* 3. 字体大小 */ .font12 { font-size: 12px; } .font14 { font-size: 14px; } .fong16 { font-size: 16px; }不同浏览器默认字体大小不一样谷歌默认16px建议给body标签统一指定大小做到浏览器统一4字体风格font-stylefont-style 用来打开和关闭文本 italic (斜体) 。属性值normal:将文本设置为普通字体 (将存在的斜体关闭)italic:如果当前字体的斜体版本可用那么文本设置为斜体版本/* 4. 字体样式倾斜 */ .italic { font-style: italic; } .normal { font-style: normal; }最常见 让 em 或者 i 标签取消默认倾斜5字体粗体 font-weightfont-weight 设置文字的粗体大小。属性值normal正常粗细bold加粗数字属性值常用400正常粗细700加粗取值范围100-900之间/* 5. 字体粗细 */ .nobold { /* font-weight: normal; */ font-weight: 400; } .bold { /* font-weight: 700; */ font-weight: bold; }使用场景1. 很多标题是不要加粗的此时可以用CSS取消加粗。2. 部分大批量文字可以利用CSS加粗。6字体装饰 text-decoration设置/取消字体上的文本装饰 。属性值none取消文本装饰underline下划线overline: 上划线line-through穿过文本的线/* 6. 字体装饰 */ a { text-decoration: none; } .underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-through { text-decoration: line-through; }使用场景1. 最常见设置链接下划线比如取消下划线等。2. 特殊情况添加删除线。2. 文本布局1文本对齐 text-align控制文本在它所在的块级盒子内如何水平对齐属性值left: 文本左对齐默认right: 文本右对齐center文本水平居中对齐justify: 自动改变字间距两端对齐text-align: center;使用场景1. 文本/图片在盒子水平对齐。2. 文章文字两端对齐。腾讯体育2首行缩进 text-indent设置块级元素中文本行前面空格缩进的长度属性值数字常见单位是em相对单位本元素的文字大小1em 等于当前元素的字体大小如果当前元素没有大小则按照父元素文字大小/* 2. 文本缩进 */ /* text-indent: 20px; */ text-indent: 2em;使用场景1. 段落首行缩进2个字的效果。2. logo隐藏文字效果3文本字符间距 letter-spacing用于设置文本字符的间距letter-spacing: 5px;使用场景1. 调整字与字之间距离用户体验更好。4行高 line-height设置文本每行之间的高属性值数字px数字不带单位当前字体大小的倍数/* 行高等于盒子高度可以让单行文本垂直居中对齐 */ line-height: 50px;行高等于盒子高度则单行文字垂直居中使用场景1. 设置多行文本之间的上下间距。2. 让单行文本垂直居中。5font简写font 简写属性在一个声明中设置多个字体属性语法font: font-style font-weight font-size/line-height font-family;其中font-size和font-family是必须写其他可以省略默认显示属性有严格的书写顺序总结这篇主要介绍CSS基础知识CSS选择器CSS文本样式。下一篇介绍盒子模型。