关键词：
1.字体设置
‘‘‘ text-align:center; # 水平居中方式 color:red; # 字体颜色 font:900 30px/120px ‘STSong‘; # 字重 大小/行高 字族 # 了解 # em(自身->父->html) | rem(html) text-indent: 2em; #字划线 # underline | line-through | overline text-decoration: overline; ‘‘‘
2.reset操作
# what|why: 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作 ‘‘‘ body, h1, h6, p margin: 0; ul margin: 0px; padding: 0; list-style: none; a text-decoration: none; color: black; ‘‘‘
3.高级选择器
/*1.群组选择器: 同时控制多个 选择器之间用逗号隔开 每一个选择器位均可以替换为任意基础选择器或高级选择器 */ .div1, .p1 color: red; /*2.后代子代选择器 通过关系层次控制一个目标选择器 >代表父子关系 | 空格代表后代关系 */ .sup1 > .sub color: orange; /*sub是body的后代,但不是子代*/ body .sub color: pink; /*3.兄弟选择器 通过关系层次控制一个目标选择器 */ /* + 相邻 */ .b2 + .b3 color: blueviolet; /* ~ 兄弟 */ .b1 ~ .b3 color: brown; /*4.伪类选择器 - 位置*/ ul:nth-child(10) > li:nth-child(2n) color: green;
高级选择器优先级
""" 优先级和个数(权重)相关 基础选择器优先级占主导: id 无限大于 class 无限大于 标签 选择器优先级相同时, 和顺序有关 高级选择器类型不会影响优先级 伪类选择器相当于class """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器优先级</title>
<style>
/* 优先级和个数(权重)相关
基础选择器优先级占主导: id 无限大于 class 无限大于 标签
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
*/
.div
font-size: 100px;
color: red;
div > .div
color: orange;
div ~ div ~ .div
color: brown;
div .div
color: pink;
.div:nth-child(3)
color: yellowgreen;
.sup .div
color: darkgreen;
</style>
<style>
/*多类名*/
.div.div1
color: black;
/* div.div#dd.div1 */
</style>
</head>
<body>
<div>
<div class="sup">
<div>
<div>
<div></div>
<div></div>
<div class="div div1" id="dd">123</div>
</div>
</div>
</div>
</div>
</body>
</html>
4.边界圆角
#左上为第一个角, 顺时针赋值, 不足找对角 #border-radius: 30px 60px; #border-radius: 150px; #border-radius: 50%; #横向第一个角50px, 第二个角10px, 不足找对角*/ #纵向均是150px #border-radius: 50px 10px / 150px;
5.a标签的四大伪类
‘‘‘ :link 链接初始状态 :hover 鼠标悬浮状态 ***** :visited 链接访问后的状态 :active 鼠标按下时的状态 *** ‘‘‘ # 注：hover和active普通标签也可以使用
6.背景图片之精灵图
‘‘‘ div background: url("img/bg.png") no-repeat 10px 20px; 图片地址 不平铺 x轴偏移 y轴偏移 精灵图操作本质: 控制背景图片的位置 backgroud-position-x backgroud-position-y div:hover backgroud-position-y: -20px; ‘‘‘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
a
color: #333;
text-decoration: none;
h1
width: 500px;
height: 100px;
border: 1px solid black;
h1 a
width: 500px;
height: 100px;
display: block;
background-color: yellow;
background: url("img/bg.png") no-repeat 0 -150px;
h1 a:hover
background-position-y: -250px;
</style>
<style>
.li
width: 157px;
height: 48px;
border: 1px solid black;
background: url("img/bg.png") no-repeat -155px 0;
.li:hover
cursor: pointer;
background-position-y: -48px;
</style>
</head>
<body>
<h1><a href=""></a></h1>
<div class="li"></div>
</body>
</html>
css高级篇——属性选择器(attributeselectors)(代码片段)
属性选择器可以定位到拥有某个属性的元素，甚至可以精确到具体的属性值。属性匹配选择器后面跟一个方括号，方括号内是属性名：abbr[title]border-bottom:1pxdotted#ccc;上述代码的含义是：为有title属性的abbr标签添加... 查看详情
css高级篇——属性选择器(attributeselectors)(代码片段)
属性选择器可以定位到拥有某个属性的元素，甚至可以精确到具体的属性值。属性匹配选择器后面跟一个方括号，方括号内是属性名：abbr[title]border-bottom:1pxdotted#ccc;上述代码的含义是：为有title属性的abbr标签添加... 查看详情
css学习总结(代码片段)
...结五.常用元素属性1.字体属性设置字体字体大小字体粗细文本样式2.文本属性文本颜色文本对齐文本装饰文本缩进行高3.背景属性背景颜色背景图片背景 查看详情
前端基础只是学习(代码片段)
...性有哪些？并说明属性的含义，画出盒子模型图4.如何让文本垂直和水平居中？ 查看详情
css高级技巧(代码片段)
...S用户界面样式4.1鼠标样式cursor4.2轮廓线outline5.vertical-align属性应用 查看详情
css高级篇——属性选择器(attributeselectors)(代码片段)
属性选择器可以定位到拥有某个属性的元素，甚至可以精确到具体的属性值。属性匹配选择器后面跟一个方括号，方括号内是属性名：abbr[title]border-bottom:1pxdotted#ccc;上述代码的含义是：为有title属性的abbr标签添加... 查看详情
前端基础-css高级技巧(代码片段)
....鼠标样式2.取消表单轮廓和防止拖拽文本域四.vertical-align属性应用1.图片文字垂直居中对齐2.图片底部空隙五.溢出的文字省略号显示1.单行2.多行六.常见 查看详情
css：10月11日课堂笔记:css的概念|基础选择器|文本样式属性(代码片段)
...id选择器通配符选择器交集选择器后代选择器并集选择器文本样式属性font-size字体大小font-family字体font-weight字体粗细font-style字体风格font综合设置字体样式font-variant小型大写@font-face自定义 查看详情
css：10月11日课堂笔记:css的概念|基础选择器|文本样式属性(代码片段)
...id选择器通配符选择器交集选择器后代选择器并集选择器文本样式属性font-size字体大小font-family字体font-weight字体粗细font-style字体风格font综合设置字体样式font-variant小型大写@font-face自定义 查看详情
web前端练习31----css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）(代码片段)
参考文档：https://man.ilovefishc.com/css3/一、基本选择器：1通配符选择器*2元素选择器element3类选择器.class4id选择器#id5内联样式style二、复合选择器：1交集选择器 element.class||element#id2并集选择器 element1,element2,element3,...3... 查看详情
python爬虫编程思想（59）：用beautifulsoupcss选择器获取属性值与文本(代码片段)
...象的集合，所以可以使用Tag对象的方式获取节点属性值和文本内容。获取属性值可以使用attrs，也可以直接使用[...]方式引用节点的属性。获取节点的文本内容可以使用get_text方法，也可以使用string属性。下面的例子使用CSS选择器... 查看详情
web前端入门到实战：常见css3选择器和文本字体样式汇总(代码片段)
...次伪类选择器有:hover，:focus焦点，::selection更改鼠标选择文本背景色，最后属性选择器（属性选择器的目的在于可以直接把标签身上的一种属性拿来用）有基本选择器[属性]、基本选择器[属性=值]、基本选择器[属性~=值]空格符隔... 查看详情
jQuery 高级选择器
...相同的CSS类，但值属性为1、2、3等。我还有一个带有id的文本输入字段。该字段只能接受数字。我想选择具有与放入文本输入框中的值相匹配的值属性的div（从长列表中）。我可以这样写吗：$(\'$(" 查看详情
csscss复合选择器①(基础选择器与复合选择器|后代选择器)(代码片段)
...代选择器; <divclass="father"> <label>内部文本</label> <label>内部文本</label> <label>内部文本</label> </div>父选择器设置为类选择器.father,子选择器设置为标签选择器label,那么将label标签内... 查看详情
第七十一天jq高级(代码片段)
...引匹配$(‘div:eq(0)‘)$(‘div‘).eq(0)内容$(‘div:contains(标签文本内容)‘)//注：采用模糊匹配2.属性操作文本//赋值：有参数$(‘.box‘).html(‘<I>beatbox</I>‘);//取值：无参数console.log($(‘.box‘)text());//表单内容//$(‘.inp‘).val(... 查看详情
web前端练习31----css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）(代码片段)
...器 element1+element26通用兄弟选择器 element1~element2三、属性选择器：属性选择器：可以根据元素中的属性或属性值选取元素，并指定样式常用属性：[attribute]选择器用于选取带有指定属性的元素。[attribute=value]... 查看详情
htmlcss(代码片段)
...class选择器id选择器后代选择器属性选择器常用属性总结文本属性字体属性背景属性边框（bord 查看详情
盒模型的属性/display显示(重要)/浮动(重要)(代码片段)
...子div>p(3).组合选择器div,p,a,span(4).交集选择器div.active(5).属性选择器input[type="text"](6),伪类选择器爱恨准则 a:link a:visited a:hover a: 查看详情