布局应该注意的地方
在开始布局之前,把浏览器的内外边距清零 */
*{
padding: 0px;
margin: 0px;
}
快捷键 注释快捷键:ctrl + / 取消注释: ctrl + z
HTML 编写快捷键 例如:
ul.header> li.header-1{元素内容} *10
ul 的class=“header”, li 的class="header’, 花括号里面的是元素内容,*10 代表有10个 li 项
父元素和子元素之间用大于号 >
ul #header> li #header-1{元素内容} *10
ul 的 id =“header”, li 的 id ="header’, 花括号里面的是元素内容,*10 代表有10个 li 项
一、CSS的创建和引入加粗样式
样式有三个来源
一是外部样式,link 引入 ,优先级最低
二是内部样式, 优先级次之
三是行内样式<p style="color=“red” ; ">
二、CSS的字体,文本控制
字体颜色,color属性,进行设置
文本的对齐方式,text-align属性进行设置,属性值有center,right,left,justify(两端对齐);
设置行高:line-height:20px;行与行之间的空间;
如果想要文本在一行的正中间,line-height的高度要和文本height的高度一致
设置字符之间的间距,letter-spacing,字符之间的空间
设置词间距,word-spacing,单词之间的空间,一般是用在英语单词上;
文本修饰,text-decoration: none;用来设置或者删除链接的下划线; underline加上下划线
文本粗体,font-weight:属性值:normal(默认),bold(粗体)/数字值:100-900;
文本大小,font-size:属性值(em/px;16px=1em);
文本字体,font-family
复合写法,font
首行缩进:text-indent: 2em;首行缩进2个字符——2em;
列表样式——无序列表——有序列表
列表样式:list-style:none;属性值(none,) 去除列表的圆点,排序
border-collapse: ;边框是否折叠成单一边框
colspan=""合并列
rowspan="2"合并行
三、border 属性和字体阴影
border-color: ;属性为边框指定颜色
border-width: ;属性为边框指定宽度
border-style: ;边框样式属性,为边框指定要显示什么样的边界,(dotted:点线边框;dashed:虚线边框;solid:实线边框;double:双边框;)
简写:border,颜色,宽度,样式;
文字阴影,text-shadow:有四个属性值,(x 轴阴影位置,y 轴阴影位置,阴影范围,阴影颜色)左下右上;text-shadow: #FFFF00 5px 5px 10px;
圆角属性设置:border-radius:可以和任何元素设置圆角
可以设置四角,
四个角顺序是:左上角,右上角,右下角,左下角
三个角顺序是:左上角,右上角右下角,左下角
两个角顺序是:左上角右下角,右上角左下角(对角线)
box-shadow:属性设置元素的阴影:
box-shadow:属性值有六个,(水平方向x轴,垂直方向y轴,模糊距离,颜色,内外)模糊距离里面有一个模糊范围,一般不设置,内外阴影默认值outset,可以设置成inset
四、背景background设置
有专门的拾取颜色的工具:屏幕捡取器
background-color属性定义背景颜色,一般简写为background;
设置背景色:英文单词,十六进制,rgb 颜色
背景颜色透明度; rgba(前三位是颜色值,最后一位是透明度,取值范围0—1;)
h1{background-color: rgba(40,41,35,0.1);}
背景的线性渐变,从上到下:语法:background: linear-gradient(角度, color, color…);45deg,45度角
hr{
height: 15px;
background: linear-gradient(pink,blue);
}
/* 对角 */
div {
height: 400px;
background: linear-gradient(45deg, red, yellow);
}
背景的径向渐变,从中间向两边扩散的渐变语法:background: radial-gradient(开始颜色,…,终止颜色)
h2{
background: radial-gradient(red,yellow);
}
背景图片设置语法:background: url(路径);/background-image: url(路径)
设置图片水平平铺或垂直平铺,语法:background-repeat: repeat-x;/repeat-y;/no-repeat;
设置图片背景定位,语法:background-position: left top;
五、选择器—盒子模型——块级元素、行内元素、行内块元素
选择器分组:被分组的选择器就可以享受相同的声明 ,用逗号把选择器分开
h1,h2,p{
background: #0000FF;
}
标签之间用逗号隔开
选择器的继承问题,子元素可以继承父元素的样式,
例如body是最大的父元素,h1,h2,p标签就会继承body的样式
body {
background: red;
}
- 是css 的通配符,代表页面的所有标签都有的属性,所有的标签都遵循的样式
类选择器:class="",标签前带 . 符号,如:.head{} 可以在多个元素中使用*/
id 选择器:id="" ,标签前带 # 符号,如: #head-1{} ,id选择器名称是唯一的 */
派生选择器,通过元素在其位置的上下文的关系来定义样式,可以使标记更加简洁 ,
派生选择器包括,后代选择器,子元素选择器,相邻兄弟选择器
后代选择器
div span{
color: #FFC0CB;
}
子元素选择器
父元素和子元素之间用 > 大于号联系,只能控制下一级子元素,不能控制下下一级
div>span{
color: green;
}
div>i {
color:red;
}
如上面所示,div>i 没有起作用 ,i 标签在span 标签内部
相邻兄弟选择器,两者要有相同的父元素,中间用 + 联系;
h3+h4{
color: #FFA500;
}
属性选择器,对带有指定属性的 html 元素设置样式
[title]{
color: #0000FF;
}
属性和值选择器
[title=red]{
color: red;
text-decoration: none;
}
选择器匹配
定义和用法
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提示:等同于 :nth-of-type(1)。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n 可以是数字、关键词或公式。
:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
例子 第一个
.item:first-of-type{
align-self: flex-end;
}
第二个
.item:nth-of-type(2){
align-self: center;
}
倒数第一个
.item:nth-last-child(1){
align-self: center;
}
倒数第二个
.item:nth-last-of-type(2){
align-self: flex-end;
}
块级元素,能够识别宽高,独占一行,多个块级元素写在一起,默认排序是从上到下;
块级元素有,h1-h6,p,div,li,等常用块级元素;
行内元素,默认不会自动换行;设置宽高无效;对margin 设置仅左右有效,上下无效;
元素内的内容可以撑开行内元素;
行内块元素,不自动换行,可以识别宽高,元素内容排列顺序从左到右;
img 标签既可以设置宽高,也可以从左到右排列,不自动换行;
display:规定元素应该生成框的类型
display:inline; 转换成行内元素;
display:block; 转换成块状元素;
display:inline-block; 转换成行内块元素;
padding 内边距
当div没有设置宽高时,给padding设置高度,可以把div撑开的,撑开元素内容;元素内容到边框的距离就是内边距;
padding:40px; 顺序是上右下左,都是40px;
padding:40px 30px 20px; 上,左右,下
padding:40px 30px; 上下,左右
margin:外边距;
边框border到外边的距离就是外边距 ,上,右,下,左;
可以设置为auto(自动),意思是等宽空白
margin:40px; 顺序是上右下左,都是40px;
margin:40px 30px 20px; 上,左右,下
margin:40px 30px; 上下,左右
上下是50px的外边距,auto 意思是左右同样的宽度空白;相当于是div 元素居中显示;
{ margin: 50px auto;}
六、布局——定位——伪类
固定定位fixed,position:flex;元素的位置相对与浏览器窗口是固定定位;导航栏布局时可能会用到;
position :fixed 运用场景:
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告,功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(登陆注册界面)
4.全屏背景(图片,视频等)
相对定位relative,position:relative;相对其正常的位置,就是和元素原来的位置做比较的
使用相对定位时会覆盖到其他的元素,解决这个问题需要用到z-index:(整数);
绝对定位:absolute;
1.绝对定位的元素的位置相对与最近的已定位父元素的位置
2.如果元素没有已定位的父元素,那么它的位置相对与初始包含块;
如,.two 已经定位为relative,是.three 的父元素,所以当.three设置为absolute时,.three 的位置是相对与.two设置的
3.特点绝对定位使元素的位置与文档流无关,所以不占据空间 ;
相对定位元素经常被用作绝对定位元素的容器块
z-index 属性设置元素的堆叠顺序,仅能在定位元素上使用;该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
z-index:可以设置元素的叠加顺序,但依赖定位属性。 z-index只作用于带有定位属性的元素。
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较;
z-index为负值,元素被普通流中的元素覆盖
number设置z-index大小,number越大z-index越大。
属性值为auto,默认值,堆叠顺序与父元素相等;
属性值为number(整数如-1,1,2),设置元素的堆叠顺序;
属性值为inhert,继承父元素的z-index的值;
float:left;浮动,属性值为left 和 right ;
特点:浮动的框可以水平方向移动,直到它的外边缘碰到包含框或者另一个浮动框的边缘为止;
浮动使元素的位置与文档流无关,因此不占据空间;
如果想要前一个元素设置的浮动对自身没有影响的话,那么需要清除浮动;
清除浮动clear:both;
text-overflow:属性规定文本溢出包含元素时发生的事情
属性值为:
ellipsls:显示省略符号来代表被修剪的文本
clip : 修剪文本
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。
visible,默认值,内容不会被修剪,会呈现在元素框之外。
hidden:内容会被修剪,并且其余内容是不可见的。
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容.
inherit:规定应该从父元素继承 overflow 属性的值。
white-space:属性设置如何处理元素内的空白
属性值nowrap 文本不会换行,文本会在同一行上继续,直到遇到br 标签为止;
inherit:规定应该从父元素继承 white-space的值;
overflow: hidden;text-overflow: ellipsis;这两个元素结合使用让溢出的文本以省略号显示;
white-space: nowrap;
这三个元素一起使用,先让元素不会换行,然后让溢出的文本隐藏起来,再把隐藏的文本仪省略号表示;
伪类:hover是伪类的一种,语法是标签:hover{};
例如:a:hover{}; 鼠标在 a 链接上悬浮会出现什么效果
列表项上设置下拉菜单,属于二次嵌套,例如:
- 苹果
- 栗子
- 栗子
- 栗子
</ul> </li> <li>苹果</li> <li>苹果</li> <li>苹果</li> </ul>
如果想要隐藏下拉菜单可以设置:li ul{display: none;}
鼠标点击时显示下拉框:li:hover ul{display: block;}
ul li{
去除圆点 list-style: none;
设置宽高 width: 100px; height: 40px;
背景颜色 background: #AFEEEE;
左浮动,使 li 列表项在一行排序 float: left;
右外边距 margin-right: 10px;
文本居中 text-align: center;
文本上下左右都居中,行高和高度一致 line-height: 40px;
}
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property: 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function (liner相同速度/ease 先慢 中间快, 结束慢)规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始
过渡属性通常和其他属性值一起使用,多个属性结合使用,中间用逗号隔开,设置宽度属性值,过渡时间是2s,例如:
p{
width: 300px;height: 200px;background: #FFA500;
transition: width 2s;
}
p:hover{width: 500px;}
当鼠标移上时,宽度过渡变成500px; 过渡属性transition和hover属性组合使用;