vs2017做的网站网站系统是什么

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

vs2017做的网站,网站系统是什么,企业做网站须要注意些什么,长沙优化官网公司CSS 样式选择器#xff0c;用于选中页面中的 html 元素#xff0c;以便添加 CSS 样式。 按渲染性能由高到低 依次是#xff1a; ID 选择器 #id 通过元素的 id 属性选中元素#xff0c;区分大小写 p idp1 第一段/p#p1{color: red; }但不推荐使…CSS 样式选择器用于选中页面中的 html 元素以便添加 CSS 样式。 按渲染性能由高到低 依次是 ID 选择器 #id 通过元素的 id 属性选中元素区分大小写 p idp1 第一段/p#p1{color: red; }但不推荐使用因为 id 选择器的优先级较高不方便重置样式id 选择器主要给 JS 使用 类选择器 .class 通过元素的 class 属性中的样式类名选中元素区分大小写 最推荐使用的 CSS 选择器因为类选择器语义化强且方便重置样式。 span classimportant 重点词汇/span.important{color: red;font-weight: bold; }同一个元素可以添加多个样式类用空格隔开 span classimportant big 巨大的重点词汇/span.important {color: red;font-weight: bold; } .big {font-size: 60px; }标签选择器 标签名 通过元素的标签名选中元素不区分大小写 a hrefhttps://www.baidu.com/ target_blank 百度/aa {text-decoration: none; /* 无文本装饰消除默认的下划线 */ }不推荐使用因为标签选择器性能不佳维护成本高 通配选择器 * 选中页面中除伪元素外的所有 html 元素常用于清除浏览器的默认样式但不推荐使用因为消耗性能。 /* 清除所有html标签默认的外边距和内边距 */

• {margin: 0;padding: 0; }属性选择器 [属性] 根据元素的属性和属性值来选中元素属性不区分大小写属性值区分大小写 属性选择器描述[attribute]用于选取带有指定属性的元素。[attributevalue]用于选取带有指定属性和值的元素。[attribute~value]用于选取属性值中包含指定词汇的元素非常适合包含多种组合属性值的场景[attribute|value]属性值起始片段选择器该值必须是整个单词。[attribute^value]匹配属性值以指定值开头的每个元素。[attribute$value]匹配属性值以指定值结尾的每个元素。[attributevalue]匹配属性值中包含指定值的每个元素。 伪类选择器 :状态名 根据元素的不同状态来选中元素 同一个标签不同的状态有不同的样式就叫做“伪类”伪类选择器例子例子描述:activea:active选择活动的链接。鼠标点击标签但是不松手时:checkedinput:checked选择每个被选中的input 元素。:disabledinput:disabled选择每个被禁用的 input 元素。:emptyp:empty选择没有子元素的每个 p 元素。:enabledinput:enabled选择每个已启用的 input 元素。:first-childp:first-child选择作为其父的首个子元素的每个 p 元素。:first-of-typep:first-of-type选择作为其父的首个 p 元素的每个 p 元素。:focusinput:focus选择获得焦点的 input 元素。:hovera:hover选择鼠标悬停其上的链接。:in-rangeinput:in-range选择具有指定范围内的值的 input 元素。:invalidinput:invalid选择所有具有无效值的 input 元素。:lang(language)p:lang(it)选择每个 lang 属性值以 “it” 开头的 p 元素。:last-childp:last-child选择作为其父的最后一个子元素的每个 p 元素。:last-of-typep:last-of-type选择作为其父的最后一个 p 元素的每个 p 元素。:linka:link选择所有未被访问的链接。:not(selector):not§选择每个非 p 元素的元素。:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 p 元素。:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个p元素从最后一个子元素计数。:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个p元素的每个p元素从最后一个子元素计数:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 p 元素的每个 p 元素。:only-of-typep:only-of-type选择作为其父的唯一 p 元素的每个 p 元素。:only-childp:only-child选择作为其父的唯一子元素的 p 元素。:optionalinput:optional选择不带 “required” 属性的 input 元素。:out-of-rangeinput:out-of-range选择值在指定范围之外的 input 元素。:read-onlyinput:read-only选择指定了 “readonly” 属性的 input 元素。:read-writeinput:read-write选择不带 “readonly” 属性的 input 元素。:requiredinput:required选择指定了 “required” 属性的 input 元素。:rootroot选择元素的根元素。:target#news:target选择当前活动的 #news 元素单击包含该锚名称的 URL。:validinput:valid选择所有具有有效值的 input 元素。:visiteda:visited选择所有已访问的链接。 列表中使用伪类选择器 伪类选择器含义li:nth-child(2)第2个 lili:nth-child(n)所有的lili:nth-child(2n)所有的第偶数个 lili:nth-child(2n1)所有的第奇数个 lili:nth-child(-n5)前5个 lili:nth-last-child(-n5)最后5个 lili:nth-child(7n)选中7的倍数 n 表示 0,1,2,3,4,5,6,7,8…当n小于1时无效因为n 0 也是不会选中的 表格中使用伪类选择器 tr:nth-child(odd)匹配表格的第1, 3, 5行等同于tr:nth-child(2n1)。tr:nth-child(even)匹配表格的第2, 4, 6行等同于tr:nth-child(2n)。伪类选择器的实战范例 使用 :nth-child() 实现斑马条纹、对齐边缘、指定区间列表高亮、动态列表自适应布局 https://blog.csdn.net/weixin_41192489/article/details/122089484 CSS 实现动态显示隐藏:checked 和 :target 的妙用 https://blog.csdn.net/weixin_41192489/article/details/126267866 使用 :target 实现展开更多、收起、Tab选项卡切换https://blog.csdn.net/weixin_41192489/article/details/121969768 使用 :placeholder-shown 实现MaterialDesign风格的交互 https://blog.csdn.net/weixin_41192489/article/details/121976627 使用 :placeholder-shown校验空值、提示不能为空 https://blog.csdn.net/weixin_41192489/article/details/121977510 :checked 实现展开收起 https://demo.cssworld.cn/selector/9/2-1.php :checked 实现选项卡切换 https://demo.cssworld.cn/selector/9/2-2.php :checked实现自定义单选框、复选框、开关、标签复选、素材单选 https://blog.csdn.net/weixin_41192489/article/details/122050069 使用 :valid 和 :invalid 实现原生表单校验 https://blog.csdn.net/weixin_41192489/article/details/122070084 使用:required和:optional实现表单校验提示文字 https://blog.csdn.net/weixin_41192489/article/details/122072879 :focus-within 实现下拉列表 https://blog.csdn.net/weixin_41192489/article/details/121959850 输入框聚焦时高亮前方的标签见链接内的方法5 https://blog.csdn.net/weixin_41192489/article/details/121784196 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片 https://blog.csdn.net/weixin_41192489/article/details/121944791 :empty 隐藏空元素、缺失字段智能提示 https://blog.csdn.net/weixin_41192489/article/details/122086159 :only-child 实现多状态的动态加载动画 https://blog.csdn.net/weixin_41192489/article/details/122088416 :fullscreen 实现点击图片全屏显示 https://blog.csdn.net/weixin_41192489/article/details/122328725 伪元素选择器 :: 用于选择和样式化元素的一部分而非整个元素 CSS2中伪元素采用单冒号前缀语法 CSS2.1中伪元素改用双冒号前缀所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话推荐使用旧的单冒号语法否则建议使用新的双冒号前缀::before 和 ::after 需配合content属性一起使用用于在元素前面和后面设置内容详见 https://blog.csdn.net/weixin_41192489/article/details/115100040 常用的实战范例 元素前后添加图标::before 和 ::after 的妙用 https://blog.csdn.net/weixin_41192489/article/details/134858462css 巧用 ::after 和 ::before 实现竖排分类导航 https://blog.csdn.net/weixin_41192489/article/details/134885007css 巧用 ::after 实现 tab 切换动效 https://blog.csdn.net/weixin_41192489/article/details/134881852 ::first-letter 首字母 p很久很久以前/p pLong long ago/pp::first-letter {font-size: 2em;color: red; }::first-line 第一行 div stylewidth: 120pxp很久很久以前有一个白发苍苍的老人/p/divp::first-line {color: red; }::selection 鼠标拖拽选中的区域 p很久很久以前有一个白发苍苍的老人/pp::selection {color: red;background-color: yellow; }::placeholder 文字占位符 input placeholder请输入 // input 不写则会选中页面所有元素的占位符 / input::placeholder {color: red; }关系选择器 通过元素间的关系选中元素 子代选择器
  标签内包裹的第一层标签是它的子代 divp我是div的儿子/p /divdivp{color:red; }后代选择器 空格 标签内的所有标签都是它的后代 div classparentp classred我是子代属于后代/pp我是子代属于后代但没有 .red/pdivdiv classred我是孙代也属于后代/div/div/div/ 所有属于.parent元素内部的.red元素都将被染成红色。/ .parent .red {color: red; }兄弟选择器 ~ 选中同一个父元素下在指定元素之后的所有同级元素所以严格讲应该叫 后面兄弟选择器 divbutton按钮1(不会变红)/buttonp段落/pbutton按钮2会变红/button /divp ~ button {color: red; }CSS 没有 前面兄弟选择器 可以参考下方链接模拟实现 https://blog.csdn.net/weixin_41192489/article/details/121784196 相邻兄弟选择器
  选中紧跟在一个元素之后的下一个元素 div classparentp段落/pbutton按钮1/buttonbutton按钮2/button/divp button {color: red; }交集选择器 选中页面中同时符合多个选择器的元素 选择器之间没有空格有空格就是后代选择器如果存在标签选择器标签选择器必须放在前面 p classred很久很久以前1/pp很久很久以前2/p/ 选中 p 标签中class值含 red 的元素 */ p.red {color: red; }并集选择器 , 多个选择器中只要满足其中一个就会被选中 多个选择器之间用 , 隔开 p classerror报错信息/pp classimportant重要信息/pp其他信息/p.error, .important {color: red; }