2021/3/13–前端学习第6天笔记
高级选择器：
<style>
/* 后代选择器 */
/* div strong{
color: red;
font-size: 50px;
} */
/* 增加了限制 */
div p strong{
color: red;
font-size: 50px;
}
/* 更加精确的限制 */
div div p strong{
color: green;
font-size: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 不考虑语义，为了定义嵌套关系 -->
<div>
<div>
<p>
<span>
<strong>ickt</strong>
</span>
</p>
</div>
<h1>
<span>
<strong>ickt</strong>
</span>
</h1>
<p>
<strong>ickt</strong>
</p>
</div>
</body>
交集选择器：选中两个选择器都拥有的元素。
写法：一个类名为para的p标签：p.para 中间没有空格。
并集选择器：
<style>
/* 交集选择器 可以连续交集。标签名在前面,只能出现一次*/
/* 带有ickt类的p标签 */
p.ickt#sp{
color: greenyellow;
font-size: 50px;
}
/* 并集选择器 */
p,div,h1{
text-decoration: line-through;
}
</style>
<title>Document</title>
</head>
<body>
<p class="ickt" id="sp">ickt</p>
<div class="ickt">ickt</div>
<p class="ickt demo">ickt</p>
<p>ickt</p>
<h1>ickt</h1>
</body>
选择器代码规范：
缩进四空格tab。
选择器名和大括号之间加空格。
属性名和冒号不加空格，冒号和值之间要加空格。
列表性的属性值写在一行，逗号之后空格。例如：30px， 50px， 80px；
每组选择器独占一行 div、p 、h1{} 三个占三行。
- ~ 左右两边各保留一个空格。
属性选择器的值和文本内容要用双引号。
属性定义另起一行，分号结尾。
4继承与层叠
继承性：例如p、h3标签从祖先元素继承了文字的属性。是css层叠性的体现。
只有文字属性能够继承、盒子的属性不能继承。
文字属性：color、font-、line-、text-系列
盒子属性：background-、width-、height-、border-、浮动、定位等。
控制台elements => style选项卡 可以查看属性的继承性。
可以简化css代码，有的属性直接赋给body，body中的很多标签都会继承这个属性。
上图为从body继承的属性。
/* 通过继承性统一设置样式 重叠性的体现*/
body {
/* 文字属性可以继承 */
color: red;
/* 盒子属性不可继承 */
height: 100px;
}
选择器的权重
选择器的针对性越高，权值越大。
权重排序：!important > 行内样式 > id > 类|伪类|属性> 标签 > 通配符
<style>
/* 显示红色，前者权重大 */
/* 当权重相同的时候，最后出现的就是我们显示的 */
div#ickt strong {
color: red;
}
div strong {
color: green;
}
</style>
特殊的关键字!important。
直接卸载css样式后面，增加权重，权重最高。important只针对某个CSS属性，不针对整个选择器。
层叠性：多组选择器的样式可以作用在同一个元素上。
比较权重、就近原则等。
并集选择器需要拆开来看。逗号
颜色表示法
16进制：以#开头，每两位数表示一种颜色，分别是三原色红、绿、蓝
十进制0-255
例如：#000000黑色 #ffffff白色 #ff0000 红色 绿色、蓝色同理，占自己的两位。
简写例如红色：#f00
https://www.html.cn/qa/css3/18554.html
CSS中颜色的几种表示方法
#000000、rgb（255，0，0）等
文字样式
colo；font-size(px、em、rem）large、larger、small、smaller、medium等）；
font-family 设置字体，允许设置多个字体，使用逗号隔开，第一个没有用第二个。默认计算机自带字体。设置html，body{font-family：”xxx“}默认字体。
值要用双引号包裹，例如font-family:“微软雅黑”，“楷体”。
font：12px，字体；
font是一个符合属性，值有摆放顺序。style、variant（可选）、weight、size、line-height、family。例如代码如下：
/* 字体 */
html, body {
font-family: "楷体";
}
.demo1 {
font-family: "微软雅黑"，"隶属 常规";
}
/* 样式：斜体 */
.demo2 {
font-style: italic;
}
/* 样式：加粗 */
.demo3 {
font-weight: bold;
}
/* 行高 */
/* 5代表5倍行高，80px代表80px */
.demo4 {
line-height: 5;
/* line-height: 80px; */
}
/* 将小写字母变大写，但是是小一号的 */
.demo5 {
font-variant: small-caps;
}
.demo6 {
font:italic bold 50px/3 '黑体';
}
文本样式：
<style>
a {
color: red;
/* 文本修饰 */
/* 快捷键 tdn+tab */
text-decoration: none;
/* 下划线 */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线 */
/* text-decoration: line-through; */
}
p {
width: 800px;
/* text-indent 首行缩进*/
/* em单位表示字体个数,缩进多大取决于字体大小 */
text-indent: 2em;
/* text-align 文本的水平对齐*/
text-align: right;
/* white-space元素内的空白怎么处理 normal\pre\nowrap\pre-wrap\pre-line*/
/* 就算超出div也不换行 */
white-space: nowrap;
}
/* align ：规定 div 元素中的内容的水平对齐方式。
text-align：规定“元素中”的文本的水平对齐方式。
两个属性使用的地方不一样，但是作用一样！ */
.demo-1 {
/* 字符之间距离 */
letter-spacing: 10px;
}
.demo-2 {
/* 单词之间距离 */
word-spacing: 20px;
letter-spacing: 10px;
}
img {
width: 50px;
/* 同一行内级元素垂直方向居中对齐 */
/* vertical-align: middle; */
/* 给像素 */
vertical-align: -50px;
}
.demo-3 {
width: 100px;
/* 截取 */
/* text-overflow: clip; */
/* 省略号 */
text-overflow: ellipsis;
/* 配合white-space,不要换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
}
</style>
<title>Document</title>
</head>
<body>
<h1 class="demo-1">ickt</h1>
<h1 class="demo-2">爱创 课堂</h1>
<!-- https://blog.csdn.net/weixin_43198324/article/details/106597090
解决绝对\相对路径和为什么图片url不能使用根目录和./来引用 -->
<p>hello ickt<img src="../../pic/test.jpg" alt=""></p>
<div class="demo-3">hello ickthello ickthello ickthello ickthello ickthello ickt</div>
<a href="">ickt</a>
<a href="#abc">ickt</a>
<!-- 有css的替代方案了，该表其语义不强被废弃 -->
<!-- <u>hello</u> -->
<p>拉萨看得见了撒可见度拉萨大家拉 萨大家了我切欧气我陪请问那些来看你了可能完全承诺履行看几次诵读
家拉萨大家了我切欧气我陪请问那些来看你了可能完全承诺履行看几次诵家拉萨大家了我切欧气我陪请问
家拉萨大家了我切欧气我陪请问那些来看你了可能完全承诺履行看几次诵
</p>
</body>
继承性：文本的属性都可以被继承，
/* 继承性 */
/* 继承性 */
.ickt-3 {
/* 文字所有样式都可以继承 */
color:red;
font-size: 50px;
/* 和盒子相关的样式不能继承 */
border: 2px;
}
列表样式
li {
list-style-type: circle;
list-style-image:url() ;
list-style-position:inside ;
}
P47
P48
扫一扫
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
