一.外联样式

通过link标签引入外部css文件夹中的xxx.css文件到head标签中

例:

二.

1.组选择器

选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值}

例:

p元素

标题1

标题2

2.伪类/伪元素选择器a::伪类提高浏览器的兼容性a:link 设置超链接未被访问时的页面显示a:visited 设置超链接已被访问过时的页面显示a:hover 设置鼠标悬停在超链接时的页面显示a:active 设置点击时的超链接页面显示注意:它们四个书写的顺序很重要(link和visited必须写到hover之前,active必须位于hover之后.)3.返回顶部案例:通过name命名,超链接绑定例:

我的超链接

返回顶部

4.圆角显示边框border:none 无边框//border-top-left-radius:50%;border-top-right-radius:50%;border-bottom-left-radius:50%;border-bottom-right-radius:50%;//简写://border-radius: 50%;//边框的阴影:box-shadow: 20px 10px 60px 15px gray;(水平,垂直,模糊程度 ,阴影大小,颜色)5.css三种样式的优先级默认:行内>内嵌>外联css三种样式的权重/改变优先级:!important6.伪类选择的元素:nth-chid()例:

效果:

7.盒子模型(1)重要的组成元素:content(内容),padding(内边距),border(边框),margin(外边距)(2)marginmargin:100px auto;(100px 表示的是上下的外边距 auto表示的左右水平居中)margin:10px,20px,30px,40px;(上,右,下,左,)margin;10px,20px,30px;(0px 表示上 20px表示左/右 30px表示下)margin: 10px 20px;(10px表示上下 20px表示左右)margin: 30px;(30px表示上右下左 都为这值)(3)让元素中的内容与元素边框之间的距离增大,可以设置元素的内边距padding: 10px 20px 30px 40px;(上10px,右20px,下30px,左40px)padding: 10px 20px 30px;(上 , 左/右 , 下)8.margin-top塌陷问题产生:一个元素中含有一个子元素,给子元素添加margin-top时,会发现将设置的值添加给父元素,导致子元素设置margin-top失效解决方法:(1)给父元素加overflow:hidden;(2)给父元素加border边框(3) 伪元素例:

9.元素溢出产生:元素溢出指一个元素中含有其他元素,而其他元素超出了这个元素(父元素),我们把这种情况称之为元素溢出.解决方法:overflow:hidden;超出父元素的部分隐藏(剪切)不在可见overflow: scroll;设置此属性,内容会被裁剪, 但是会添加滚动条,以便显示被裁剪的内容overflow:visible;默认值,不会修剪,会呈现在元素框外overflow-y:scroll;垂直滚动条overflow-x:scroll;水平滚动条overflow:auto;如果剪切了才显示滚动条10.布局中常见的三种标签(1)块元素/标签:块元素会占据文档流的一行显示,即便设置了宽高也会占据一行显示.(2)内联标签/元素:内联元素的大小是跟随元素内容的改变而改变,设置了宽高,也不会改变元素的大小,同时不会占据文档流的一行,从左往右编写执行(3)内联块标签/元素:不占据一行,且能设置宽高.display属性:可以将内联元素转换成内联块元素/块元素,同时也可以将内联块元素转换成内联元素/块元素,还可以将块元素转换成内联元素/内联块元素display属性值:none:元素影藏不显示inline: 转换成内联元素block:转换成块元素,并显示元素inline-block: 转换成内联块元素