CSS
基础
1.引入
-
选择器 {}
-
引入方式
(小案例)内嵌式 写在style标签中
(项目)外联式写在单独的.css文件中
<link rel="stylesheet" href="./my.css">
(配合js使用)行内式写在标签的style属性中
<div style="color: ;">hh</div>
2.选择器
-
标签选择器
以标签名命名的选择器
选中所有的标签都生效
<style> p{ color: red; } </style> </head> <body> <p>这是p标签</p>
-
类选择器
定义和使用才能生效
类名由数字字母下划线中划线组成,不能以
数字和中划线开头。
<style>
.yanse{
color: red;
}
</style>
</head>
<body>
<p class="yanse">这是p标签</p>
</body>
-
id选择器
配合js使用
一个id只能用一次
<style> #blue{ color: skyblue; } </style> </head> <body> <p id="blue">这是p标签</p> </body>
-
通配符选择器
选择所有标签
<style> *{ color: red; } </style> </head> <body> <p>这是p标签</p> <p>这是h标签</p> <p>这是q标签</p> </body>
3.字体和文本样式
-
文字
默认字号16
字号注意加字号
字号:
font-size
粗细:
normal400
bold700
倾斜:
font-style: italic;
font-style: normal;//不倾斜
字体:
font-family: 字体;
可以化简:
font: style weight size family
(复合属性)不能省略字号和字体(只能省前两个)<style> p{ font-size: 30px; font-weight: 100; font-style: italic; font-family: 楷体; //font: italic 700 66px 宋体; } </style> </head> <body> <p>这是p标签</p> </body>
css是层叠样式表
写在后面的覆盖前面的
文本缩进:
text-indent: 10em;
(一般用em代表一个字符可以不用管字号大小)文本水平对齐方式:text-align: center;(left,right)(文本,span,a,input,img标签都可以实现 (图片在body中!)。
- 文本
文本修饰:
text-decoration: underline;
下划线
text-decoration: line-through;
删除线
text-decoration: overline;
上划线
text-decoration: none;
无装修线<style> p{ text-indent: 10em; text-align: center; } body{ text-align: center; } a{ text-decoration: underline; text-decoration: line-through; text-decoration: overline; text-decoration: none; } </style> </head> <body> <p>最新的web前端html5+css3+前端项目重磅上线啦! 采用实战式教学,一线大厂的综合案例,用最短的路径讲解每个技术点,每章节都自成闭环。 课程中和课程尾配备两个实战项目,项目一类型是企业站,快速的将基础知识点进行反复练习;项目二类型是电商站,基于项目一升级难度,掌握更复杂的网页效果的开发流程和布局标准。严格按照专</p> <img src="pp/捕获.PNG" alt=""> <a href=#>"点呀!!!"</a> </body>
- 行高:
line-height: 100px;
(注意单位)
or
line-height: 1.5;
(字号的倍数) 也可以
font: style weight size**/line-height** family
```
最新的web前端html5+css3+前端项目重磅上线啦! 采用实战式教学,一线大厂的综合案例,用最短的路径讲解每个技术点,每章节都自成闭环。 课程中和课程尾配备两个实战项目,项目一类型是企业站,快速的将基础知识点进行反复练习;项目二类型是电商站,基于项目一升级难度,掌握更复杂的网页效果的开发流程和布局标准。严格按照专
```4.谷歌调试工具
f12或检查
5.拓展
- 颜色取值
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
</div>
- div由于网页布局,如果用div尽量使用类名控制样式
2.进阶
1.选择器
-
后代选择器:选择器1 选择器2 {}(所有级别后代)
-
子代选择器:选择器1>选择器2 {}(只选下以及)
-
并集选择器:选择器1,
选择器2,
选择器n {}
-
交集选择器:
<style> p.box{ color: red; } </style> </head> <body> <p class="box">ppp</p> <div>div</div> <span class="box">span</span> <h1>h1</h1> <h2>h2</h2> </body>
-
hover伪类选择器(鼠标悬停在元素中的状态)
<style> a:hover{ color:red; } </style> </head> <body> <a href="#">lianj</a> </body>
-
Emmet语法
2.背景
-
默认透明
-
背景图片:
background-image: url(pp/捕获.PNG);
-
背景平铺:
background-repeat
-
背景位置:
background-position: center center;
- 背景属性连写
background: color image repeat position
这几个不分顺序(英文没影响。数字有顺序要求)
-
背景相关属性
img实现比较重要的
其他用背景
3.显示模式
-
块级:独占一行,可以设置宽高,宽带默认父元素宽度,高度默认由内容撑开
eg:div,p,h
-
行内元素
一行显示多个,宽度和高度默认内容撑开,不可以设置宽高
eg:a,span
-
行内块
一行显示多个,可以设置宽高
eg:input,textarea
-
转换
-
标签嵌套
4.css特性
- 继承性
子元素继承父元素特点
文字控制属性都可以继承
a中的color会继承失效
h中的font-size会继承失效
- 层叠性
3.盒子模型
-
叠加计算
如果都是继承,看继承那个父级高,那个 生效
-
PxCook
-
盒子模型
- 边框border
/* 边框 solid实线 dashed 虚线 dotted点线//线的方向-left */
div{
width: 200px;
height: 200px;
background-color: pink;
border-right: 1px solid #000;
}
boder padding会撑大盒子的尺寸(两侧边框)
2.
-
内边距padding:10px,20px,40px,80px
最多取4 个值 上下左右
三个值上 左右 下
两给值上下 左右
-
自动内减
box-sizing: border-box
不会成大
-
外边距margin
-
清除默认边距
margin 和padding:0;
-
版心居中
margin:0 auto;
-
一些问题
-