一 分组与嵌套
div,p,span { /*逗号表示并列关系*/ color: yellow; } d1,.c1,span { color: orange; }
二 伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; } a:link { /*访问之前的状态*/ color: red; } a:hover { /*需要记住*/ color: aqua; /*鼠标悬浮态*/ } a:active { color: black; /*鼠标点击不松开的状态 激活态*/ } a:visited { color: darkgray; /*访问之后的状态*/ } p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input框获取焦点(鼠标点了input框)*/ background-color: red; } </style> </head> <body> <a href="https://www.jd.com/">小轩在不在?</a> <p>点我有你好看哦</p> <input type="text"> </body> </html>
三 伪元素选择器
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
四 选择器优先级
1.选择器相同 书写顺序不同，就近原则:谁离标签更近就听谁的
2.选择器不同 书写顺序不同，行内 > id选择器 > 类选择器 > 标签选择器，精确度越高越有效
五 css属性相关
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
5.1字体属性
p { /*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/ /*font-size: 24px; !*字体大小*!*/ /*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/ /*color: red; !*直接写颜色英文*!*/ /*color: #ee762e; !*颜色编号*!*/ /*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/ /*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/ /*当你想要一些颜色的时候 可以利用现成的工具 1 pycharm提供的取色器 2 qq或者微信截图功能 3 也可以多软件结合使用 */ }
5.2文字属性
p { /*text-align: center; !*居中*!*/ /*text-align: right;*/ /*text-align: left;*/ /*text-align: justify; !*两端对齐*!*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ /*text-decoration: line-through;*/ /*text-decoration: none;*/ /*在html中 有很多标签渲染出来的样式效果是一样的*/ font-size: 16px; text-indent: 32px; /*缩进32px*/ } a { text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/ }
5.3背景图片
img { background-color: green; background-image: url("222.png"); background-attachment: fixed; }
5.4边框
div { border-width: 5px; 边框的宽 border-style: solid;边框样式：实线 border-color: green;边框颜色 随意设置四面的边框 /*border-left- 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right- 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top- 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom- 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/ border: 3px solid red; /*可以连续写，三者位置可以随意写*/ border-radius: 50%; /*设置边框4个角的弧度直接写50%即可 长宽一样就是圆 不一样就是椭圆*/ }
5.5 display属性
.d1{ display: none; 隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上 display: inline; 将标签设置为行内标签的特点 display: block; !*将标签设置成块儿级标签的特点*!*/ display: inline-block; !*标签即可以在一行显示又可以设置长宽*! }
5.6 盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
body{ margin: 0; 上下左右全是0 margin: 10px 20px; !* 第一个上下 第二个左右*！ margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*! margin: 10px 20px 30px 40px; !*上 右 下 左*! } p { margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin: 0 auto; /*只能做到标签的水平居中*/ } p{ padding-left: 10px; padding-top: 20px; padding-right: 20px; padding-bottom: 50px; padding: 10px; padding: 10px 20px; padding: 10px 20px 30px; padding: 10px 20px 30px 40px; /*规律和margin一模一样*/ }
5.7 浮动
浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大
只要是设计到页面的布局一般都是用浮动来提前规划好
p{ float: left; /*浮动 浮到空中往左飘*/ float: right; /*浮动 浮到空中往右飘*/ }