Python基础day48
伪类选择器
<style> /*未访问时候显示的*/ a:link { color: #FF0000; } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 鼠标点击时出现*/ a:active { color: #0000FF } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 选中input输入框时出现效果 */ input:focus { outline: none; background-color: #eee; } </style>
伪元素选择器
<style> /*p:first-letter {*/ /* font-size: 48px;*/ /* color: red;*/ /*}*/ /*在每个<p>元素之前插入内容*/ p:before { content: "*"; color: red; } p:after { content: ""; color: red; } /* 我们后面可以使用它来解决父标签塌陷问题，浮动带来的问题*/
选择器的优先级
比较id、类、标签选择器的优先级
style样式、外部引入的CSS、行内式
1. 选择器相同的情况下，谁的优先级更高
选择器相同，谁离标签越近就听谁的
行内式的优先级是最高的!!!
2. 选择器不同的情况下，谁的优先级最高
比较id、类、标签选择器的优先级
行内式 > id选择器 > 类选择器 > 标签选择器
CSS属性相关
宽和高
给元素设置宽和高------>元素、标签、节点------->意思都一样
宽和高默认情况下只能跟块儿级元素设置才有效，行内元素设置无效，但是你可以设置，也不报错，只不过就是没效果
<style> div { width: 30px; height: 20px; } </style>
字体属性
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
<style> div { font-size: 20px; font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: 400; font-weight: inherit; } </style>
文本颜色
<style> div { background-color: red; color: pink; color: #FF00FF; color: #F0F; color: rgb(199,99,99); color: rgb(199,99,99,0.5); color: rgb(199,99,99); opacity: 0.3; 透明度 } </style>
文字属性
<style> p { text-align: left; 左对齐 text-align: right 右对齐; text-align: center 居中对齐; text-align: justify 两端对齐; text-indent: 28px 首行缩进; } a { text-decoration: underline; 下划线 text-decoration: line-through 中划线; text-decoration: overline 上划线; text-decoration: none 无划线; } </style>
背景属性
<style> div { width: 800px; height: 800px; border: 5px solid red;边框颜色和边框粗细 background-color: mistyrose; background-image: url("琛哥.jpg"); opacity: 0.5;透明度 background-repeat: repeat-x;/*X轴平铺*/ background-repeat: repeat-y;/*Y轴平铺*/ background-repeat: no-repeat;无平铺 background-position: 400px 500px;/*图片边距*/ background-position: center center;/*图片居中*/ background:repeat-x red center center url("琛哥.jpg"); background: repeat-x red; } </style>
边框
<style> p { border-width: 6px;/* 边框粗细*/ border-style: dashed;/*虚线边框*/ border-color: pink;/*边框颜色*/ border-left-width: 5px;/* 指定左边框粗细*/ border-left-style: dashed;/*指定左边框虚线*/ border-left-color: pink;/*指定左边框颜色*/ border-top-width: 5px;/* 指定上边框粗细*/ border-top-style: dashed;/* 指定上边框粗细*/ border-top-color: yellow;/* 指定上边框粗细*/ border-right-width: 5px; border-right-style: dashed; border-right-color: red; border-bottom-width: 5px; border-bottom-style: dashed; border-bottom-color: blue; border:5px solid red;/*简写粗细、边框样式、边框样式*/ width: 400px; height: 400px; border: 5px solid red; background: yellow; border-radius: 50%;/* 边框四周向内缩 画圆*/ text-align: center; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } </style>
display属性（重要）
<style> #d1 { width: 100px; height: 100px; background:red; display: inline-block;/*既有块级元素特征也有行内元素特征*/ display: none;/*隐藏块，包括位置 需掌握*/ visibility: hidden;/* 隐藏块但保留位置*/ } #d2 { width: 100px; height: 100px; background:gold; display: inline-block; } .c1 { width: 100px; height: 100px; background: blue; display: inline-block; } .c2 { width: 100px; height: 100px; background: mistyrose; display: inline-block; } </style> </head> <body> <div id="d1" ></div> <div id="d2" ></div> <span class="c1">span1</span> <span class="c2">span2</span> </body>
CSS盒子模型
举例：以快递盒与快递盒为例
快递盒与快递盒之间的距离称为是外边距----------->margin值
快递盒与内部的物品之间的距离称为是内边距---------->padding值
快递盒子的厚度称之为是边框--------------->border表示
物品的实际大小称之为是内容-------------->content来表示
# 调整标签与标签之间的距离使用的是margin值
float浮动
可以让两个块儿级元素放在一行
<style> #d1 { width: 100px; height: 100px; background:red; float: left; } #d2 { width: 100px; height: 100px; background: pink; float: left; } </style>
浮动带来的影响
/*父标签塌陷问题，如何解决的*/
/*谁塌陷就给谁加一下代码*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
