文章目录css(层叠样式表)基础选择器复合选择器常用元素属性字体属性文字属性背景属性元素的显示模式介绍盒模型弹性布局(flex)css(层叠样式表)html决定页面结构 css控制页面的展示效果css不区分大小写但是推荐写成小写的层叠样式表分为三种:1.外部样式表写在独立的.css文件中–把所有的样式规则写在一个专门的.css文件里然后在 HTML 中用link标签把它“引入”进来 --实际开发中最常用这种2.内部样式表直接写在.html里的style标签中3.内联样式表直接写在 HTML 元素的style属性里–一般放到head标签内效果都是一样的但是他们之间有显示的优先级关系:遵循就近原则css有个属性:同一个选择器里相同的 CSS 属性后面的声明会覆盖前面的。body{font-family:微软雅黑;/* 这行会被覆盖无效 */font-family:Microsoft YaHei;/* 只有这行会生效 */}基础选择器标签选择器:stylep{color:red;}div{color:green;}/style这样就是把所有p和div标签都设置成红和绿色类选择器:style.blue{color:blue;}.box{width:200px;height:150px;}/styledivclassblue box我是蓝色的/div这样就会把里面指明了类的给设置成对应的样式注意:类型开头要是.一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割,)如果是长的类名, 可以使用 - 分割.不要使用纯数字, 或者中文, 以及标签名来命名类名.id选择器:style#ha{color:red;}/styledividha蛤蛤/divCSS 中使用 # 开头表示 id 选择器id 是唯一的, 不能被多个标签使用通配符选择器:* { color: red; }页面的所有内容都会被改成红色.通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除–主要用来消除边距复合选择器后代选择器(包含选择器):–隔辈也亲ul li a { color: yellow; } 或者 ul a { color: yellow; }ulliaaa/lilibbb/liliahref#ccc/a/li/ul这样就会把ul里面的li里面的a修改颜色而不影响其他的.one li a { color: green; }olclassoneliddd/lilieee/liliahref#fff/a/liliahref#fff/a/liliahref#fff/a/li/ol还可以跟基础选择器混合着使用子选择器:–只跟自己下一代亲.twoa { color: red; }divclasstwoahref#链接1/a//就只有这个会改颜色pahref#链接2/a/p/div并集选择器:/*把苹果和香蕉颜色改成红色*/ div, h3 { color: red; }div苹果/divh3香蕉/h3ulli鸭梨/lili橙子/li/ul伪类选择器:1.链接伪类选择器:a:link:选择未被访问过的链接a:visited:选择已经被访问过的链接a:hover:选择鼠标指针悬停上的链接a:active:选择活动链接(鼠标按下了但是未弹起)链接伪类:link/:visited/:hover/:active必须按固定顺序写:LVHAa href#小猫/a a:link{color:black;}a:visited{color:green;}让已经被访问过的链接恢复成未访问的状态的方法:清空浏览器历史记录(ctrlshiftdelete)2.:force 伪类选择器divclassthreeinputtypetextinputtypetextinputtypetextinputtypetext/div.threeinput:focus { color: red; }此时被选中的表单的字体就会变成红色常用元素属性字体属性设置字体:style .font-family .one{font-family:Microsoft YaHei;}.font-family .two{font-family:宋体;}/style div classfont-family div classone 这是微软雅黑 /div div classtwo 这是宋体 /div /div多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体.)如果字体名有空格, 使用引号包裹.设置大小p { font-size: 20px; }设置粗细:p { font-weight: 700; 或者 font-weight: bold; }取值范围是100到900 bold表示700 normal表示400文本样式:/* 设置倾斜 */font-style:italic;/* 取消倾斜 */font-style:normal;文字属性设置文本颜色:这三种是一样的color:red;//单词形式color:#ff0000;//十六进制形式color:rgb(255,0,0);//RGB形式鼠标悬停在vscode的颜色上, 会出现颜色选择器, 可以手动调整颜色文本对齐:控制文字水平方向的对齐.text-align:center;//居中对齐text-align:left;//左对齐text-align:right;//右对齐文本装饰:text-decoration:[值];常用取值:- underline 下划线. - none 可以给 a 标签去掉下划线. - overline 上划线. - line-through 删除线文本缩进:控制段落的 首行 缩进text-indent:[值];- 单位可以使用 px 或者 em. - 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小. - 缩进可以是负的,表示往左缩进.行高:–行高指的是上下文本行之间的基线距离–行高 上边距 下边距 字体大小line-height:[值];HTML 中展示文字涉及到这几个基准线: - 顶线 - 中线 - 基线 - 底线内容区: 底线和顶线包裹的区域引申:行高等于元素高度, 就可以实现文字居中对齐背景属性背景颜色:–默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.background-color:[指定颜色]背景图片:–url 上可以加引号, 也可以不加background-image:url(...);背景颜色和背景图片可以同时存在. 但是背景图片要在背景颜色的上方.背景平铺:background-repeat:[平铺方式]重要取值:-repeat:平铺(默认)-no-repeat:不平铺 -repeat-x:水平平铺 -repeat-y:垂直平铺背景位置:background-position:x y;参数有三种风格:1.方位名词: (top, left, right, bottom)2.精确单位: 坐标或者百分比(以左上角为原点的左手直角坐标系)3.混合单位: 同时包含方位名词和精确单位注意如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中.)如果参数是精确值, 则的的第一个肯定是 x, 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)背景尺寸:background-size:length|percentage|cover|contain;-可以填具体的数值:如 40px 60px 表示宽度为 40px,高度为 60px -也可以填百分比:按照父元素的尺寸设置. -cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 -contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.圆角矩形:border-radius:length;想生成圆形:填50%想生成圆角矩形:填50px也可以四个角分别设置:(左上 → 右上 → 右下 → 左下)border-radius:10px 20px 30px 40px;元素的显示模式介绍主要有块级元素和行内元素块级元素:常见的有h1 - h6 p div ul ol li特点: 1.独占一行 2.高度, 宽度, 内外边距, 行高都可以控制. 3.宽度默认是父级元素宽度的 100% (和父元素一样宽) 4.是一个容器(盒子), 里面可以放行内和块级元素. --但是文字类的元素内不能使用块级元素(比如:p和div),而且不是所有块级元素都能嵌套任意元素行内元素(内联元素):常见的有a strong b em i del s ins u span特点: 1.不独占一行, 一行可以显示多个 2.设置高度, 宽度, 行高无效 3.左右外边距有效(上下无效). 内边距有效. 4.默认宽度就是本身的内容 - 行内元素只能容纳文本和其他行内元素, 不能放块级元素改变显示模式:-display:block 改成块级元素 -display:inline 改成行内元素 -display:inline-block 改成行内块元素盒模型每个HTML元素都相当于是一个矩形的盒子(由边框border内容content内边距padding外边距margin构成)边框:基本属性:-粗细:border-width -样式:border-style,默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框 -颜色:border-color 支持简写,没有顺序要求border:1px solid red;可以改四个方向的任意边框. border-top/bottom/left/right例子:border:1px solid blue;border-top:red;注意:边框是会撑大盒子的如果不想的话就*{box-sizing:border-box;}内边距:用padding来进行调整默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距 - padding-top - padding-bottom - padding-left - padding-right 使用box-sizing:border-box 属性也可以使内边距不再撑大盒子复合写法:可以把多个方向的 padding 合并到一起.padding:5px;表示四个方向都是 5pxpadding:5px 10px;表示上下内边距 5px,左右内边距为 10pxpadding:5px 10px 20px;表示上边距 5px,左右内边距为 10px,下内边距为 20pxpadding:5px 10px 20px 30px;表示 上5px,右10px,下20px,左30px顺时针外边距:(使用margin)基础写法 控制盒子和盒子之间的距离.可以给四个方向都加上边距 - margin-top - margin-bottom - margin-left - margin-right 复合写法的规则跟padding一样 margin 是盒子外部的间距它本身就不会撑大盒子的 width/height只会影响盒子与盒子之间的距离margin还能用来让块级元素居中:使用前提:元素必须手动设置了width/* 写法1分开写左右边距 */margin-left:auto;margin-right:auto;/* 写法2简写所有边距为auto */margin:auto;/* 写法3最常用、最推荐的写法 */margin:0 auto;去除浏览器默认样式的方法:浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别.为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式.*{margin:0;padding:0;}弹性布局(flex)弹性布局是用来专门解决网页里「元素怎么排、怎么对齐、怎么均匀分布」的问题display:flex //能让元素自动并排不用写浮动 轻松实现水平 / 垂直居中 让元素均匀分布在父容器里被设置为display:flex属性的元素, 称为 flex container它的所有子元素立刻成为了该容器的成员, 称为 flex item – flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)注意:当父元素设置为display: flex之后子元素的float,clear,vertical-align都会失效。flexcontainer的常用属性:justify-content 设置主轴上的子元素排列方式. 使用之前一定要确定好主轴是哪个方向属性取值:| 值 | 描述 |----------------|------------------------------------ | flex-start | 默认值。项目位于容器的开头。 | flex-end | 项目位于容器的结尾。 | center | 项目位于容器中央。 | space-between | 项目在行与行之间留有间隔。 | space-around | 项目在行之前、行之间和行之后留有空间。 align-items 设置侧轴上的元素排列方式 在上面的代码中,我们是让元素按照主轴的方向排列,同理我们也可以指定元素按照侧轴方向排列. | 值 | 描述 |----------------|------------------------------------------ | stretch | 默认值。行拉伸以占据剩余空间。 | center | 朝着弹性容器的中央对行打包。 | flex-start | 朝着弹性容器的开头对行打包。 | flex-end | 朝着弹性容器的结尾对行打包。 | space-between | 行均匀分布在弹性容器中。 | space-around | 行均匀分布在弹性容器中,两端各占一半。注意:align-items 只能针对单行元素来实现. 如果有多行元素,就需要使用 align-content