一、CSS
- Cascading Style Sheets：层叠样式表
- 用来控制标签样式
二、CSS语法: 键值对
color: red;
三、CSS位置
3.1.行内
容器标签
3.2.页内
3.3.外部：单独CSS文件中，用link标签引用
// CSS文件中代码
div{
color: olivedrab;
font-size: 66px;
background-color: greenyellow;
}
p{
color: goldenrod;
font-size: 2px;
border: 2px dashed darkolivegreen;
}
四、CSS选择器
4.1.普通选择器
- 选择某一类标签添加样式:
div
- 选择某个类(class)标签添加样式:
.test1
- 选择某一 id标签添加样式:
#main
- 并列选择器:
#main, .test1
id="main" 或者 class="test1" 都会被选中
- 复合选择器:
p.test1
我是段落标签
- 后代选择器
div a
// div里面所有的a，无论多少个层级
- 直接后代选择器 :
>
- 相邻兄弟选择器:
div + p- 第一个p标签会被选中
我是div标签
我是段落标签p1
我是段落标签p2
- 属性选择器:
div[name]
我是div标签
div[name]{
color: red;
}
- 通配选择符：
*
//级别非常低，性能比较差
*{
font-size: 30px ;
}
4.2.伪类选择器
- focus 向有键盘输入焦点的元素添加样式
- hover 鼠标移动到元素上时候，改变元素的样式
#main:hover{
width: 300px;
height: 200px;
background-color: aqua;
}
五、选择器的优先级别
- 选择器的权值加在一起，大的优先。如果相等，后定义优先
- 通配选择符：0
- 标签： 1
- 伪元素： 1
- 类： 10
- 属性： 10
- 伪类： 10
- id： 100
- important： 1000
- important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
六、CSS属性
6.1.可继承属性
- 所有标签可继承
visibility// 元素是否可见
cursor// 显示的光标的类型
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction块级标签可继承
text-indent、text-align列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
6.2.不可继承属性
- 常用
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float - 不常用
clear、table-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi
七、CSS实战应用-重点举例
- 1.设置文本中间划杠
text-decoration: line-through; // 中间有线
text-decoration: none; // 无下划线等
text-shadow: 10px 10px 9px purple; // 设置文字阴影
- 2.首行缩进
text-indent: 2%;
- 3.处理超出的内容: hidden直接裁剪
overflow: scroll;
- 5.设置自己的下划线
border-bottom: 1px solid #dddddd;
- 6.无序列表，去除黑点
ul{
list-style: none;
}
- 7.no-repeat:不平铺
background: url("images/bg.jpeg") no-repeat;
- 8.覆盖一整页
background-size: cover
- 9.设置边框
border: 2px solid black;
- 10.设置内边距
padding:10px;
- 11.设置外边距
margin: 30px;
- 12.设置透明度
background-color: rgba(255,0,0,1.0);
- 13.设置圆角
border-radius: 20px;
- 14.设置上左的圆角
border-top-left-radius: 100px;
- 15.设置下右的圆角
border-bottom-right-radius: 100px;
- 16.设置不透明度
opacity: 0.1;
- 17.设置块阴影
box-shadow: 10px 10px 10px purple;
- 19.浮动(到父标签的左边和右边，上边，下边)
- 任何标签只要一浮动,类型就会被转为行内-块级标签
float: left;
- 20.相对浏览器进行定位
position: fixed;
- 21.停留在父标签的任意位置
/*子绝父相*/
position: relative;
position: absolute;
- 22.设置水平居中,垂直居中:适用于行内标签和行内-块级标签
text-align: center;
line-height: 200px;
- 23.设置水平居中,垂直居中:适用于块级标签
// 先设置高度
margin:0 auto;
position left top tanslate
- 24.设置input的外边框
box-sizing: border-box;
- 25.伪类: 去除input外边框，设置自定义边框
#main .search input:focus{
outline: none;
border:1px solid #3385ff;
}
- 26.去除按钮边框
border: 0;
- 27.伪类:去除按钮外边框
.login-btn:focus{
outline: none;
}
- 28.字体加粗
/*加粗*/
font-weight: bolder;
/*不加粗*/
font-weight: normal;
- 29.设置字体
font-family: 'Arial';
- 30.改变标签的类型
display: inline-block;
display: none; // 设置标签是否显示
- 31.设置鼠标在图片之上的时候，图片的透明度
#main .normal-search img:hover{
opacity: 0.5;
}
- 32.设置标签们的属性（和通配选择符差不多）
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0;
margin: 0;
}
33.图片居中
vertical-align: middle;
34.导入字体
@font-face {
font-family: BebasNeue-webfont;
src: url('../fonts/BebasNeue-webfont.ttf');
}
35.设置背景图片
background: url("../images/pattern.gif");
36.自适应布局
@media screen and (max-width: 1095px){
#nav ul li a{
width: 150px;
}
}
@media screen and (max-width: 844px){
#nav ul li a{
width: 60px;
font-size: 14px;
height: 35px;
line-height: 35px;
}
#list {
margin-top: 60px;
}
}
37.在body中垂直水平居中
#footer{
background-color: chartreuse;
height: 60px;
width: 400px;
position: fixed;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
38.动画的过度效果
- 百度搜索 w3cschool trasform属性，就会出现属性相关用法
- transition 自动弹出代码
- 这是对于不同浏览器的适配
- 第二个参数表示动画的用时
-webkit-transition: linear 0.25s;
-moz-transition: linear 0.25s;
-ms-transition: linear 0.25s;
-o-transition: linear 0.25s;
transition: linear 0.25s;
- 动画方向
-webkit-transform-origin: center bottom;
- 设置动画的效果
-webkit-transform: scale(1.5);
39.剪裁超出部分
overflow: hidden;