前端学习记录 |
您所在的位置：网站首页 › 前端打印样式如何控制字体大小 › 前端学习记录 |
前端学习记录
|
一、CSS层叠样式 cascading style sheets 1. 语法规则 选择器{ 属性名：属性值 } 2. 书写位置：里面的 css语句 二、CSS引入方式 引入方式书写位置作用范围使用场景内嵌式style 标签当前页面小案例外链式link 标签引入单独 css 文件多个页面项目中行内式标签 style 属性中当前标签配合 js 使用1. 内嵌式 css写在 这里 可以写在任何位置，但一般写在中 Document /* 选择器{css属性} */ p { color: chartreuse; /* 单位必须要写px */ font-size: 30px; /* 背景颜色 */ background-color: antiquewhite; width: 400px; height: 100px; text-align: center; line-height: 100px; }
2. 外联式 CSS单独在.css文件中写---直接写选择器就行 不用框架格式 /* 在css文件中直接写选择器{} */ p{ color: blue; } 在网页中需要link标签引入 Document3. 行内式 直接写在当前标签的style中属性名：属性值 } p { color: red; font-size: 30px; background-color: antiquewhite; }标签选择器测试
2. 类选择器 数字、字母、下划线、中划线组成，不能以数字和中划线开头一个标签可以用多个类名，类名之间用空格隔开.类名{ 属性名：属性值 } /* */ .red{ color: red } .size{ font-size: 24px; } 看看是什么颜色 再看看是什么颜色
3. id选择器 整个页面中不能重复，唯一的id一个标签只能由一个id（class可以有很多个值）id选择器一般配合js用#元素id{ 属性名：属性值 } /* */ .red{ color: red } .size{ font-size: 24px; } /* */ #blue { color: blue; } 再看看是什么颜色 再看看是什么颜色
4. 通配符选择器 会选中网页所有标签用于统一设置页面样式*{ 属性名：属性值 } *{ /* 清除页边距 */ margin: 0; padding: 0%; box-sizing: border-box; }四、CSS字体和文本样式 1.1 字体大小：font-size 默认值16px 1.2 字体粗细：font-weight 数值的范围：100-900的整百数 属性值数值效果normal400正常bold700加粗1.3 字体样式：font-style 取值 normal/italic 倾斜 1.4 字体系列：font-familly 默认值为微软雅黑 常见字体系列特点场景该系列常见字体无衬线字体（sans-serif）文字笔画粗细均匀，并且首尾无装饰网页黑体、Arial衬线字体（serif）文字笔画粗细不均匀，并且首尾有装饰报刊书籍宋体、Times New Roman等宽字体（monospace）每个字母或文字的宽度相等程序代码编写Consolas、 fira Code1.5 字体font系列简写---复合属性 font：style weight size/line-height family;只能省略前两个，省略则取默认值（ font：100px 微软雅黑）位置不能改变2.1 文字缩进：text-indent: 2em 缩进数值：20px字符：2em（em等于当前字体的大小）2.2 文本水平对齐方式：text-align 取值：center、left、right作用范围：文本、span标签、a标签、input标签、img标签其实是元素居中工具：要给标签的父元素设置text-alignimg标签的父级是body标签---所有要给body做选择器2.3 文本修饰：text-decoration：none 下划线：underline删除线：line-through上划线：overline无：none（默认）3. 行高 line-height 作用：控制上下行的间距 （上间距+文本高度+下间距）取值： 数字+px line-height：90px 字号的倍数 line-height：2 应用： 单行文本垂直居中：line-height=元素父元素高度///取消上下间距：line-height=1 Document .shatou{ line-height: 1; } .px{ line-height: 50px; }其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了 其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了 其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了
4.颜色取值 文字颜色：color背景颜色：background-color 颜色表示方式表示含义属性值关键词预定义的颜色名red、green、bluerbg 表示法红绿蓝三原色，取值 0-255rgb(0,0,0)rgba 表示法红绿蓝三原色+透明度，取值 0-1rgba(0, 0, 0, 0.5)十六进制表示法#开头#000000 简写 #0005.标签居中 margin margin：0 auto； 练习1：news---标签整体 嵌套 重点记得：标签居中用margin：0 auto Document div{ width: 800px; height: 500px; /* background-color: rgb(26, 168, 149); */ /* 标签居中！整个div居中 */ margin: 0 auto; } .center{ text-align: center; } .color1{ color: aqua; } .color2{ color: blueviolet; font-weight: 500; } a{ text-decoration: none; } .suojin{ text-indent: 2em; } 体霸+学霸！国乒新生代王楚钦喜获北体大本科录取通知书2020-03-04 15:32:30 发布于广西体育领域创作者 北京时间3月4日，中国运动文化教育官网发布了2020年优秀运动员本科保送推荐名单，中国乒乓球队有多人入选。其中，王楚钦获得了免试入读北京体育大学的机会，引发网友们强烈关注。 可以看到，王楚钦被推荐免试入读北京体育大学运动训练专业。除此之外，许嘉颖、李雨琪两人获得了免试入读上海体育学院的机会。 网友们也纷纷留言给王楚钦送上了祝福：“大头（王楚钦的昵称）都要上本科了呢，突然有一种孩子长大了的感觉，哈哈”、“本妈妈粉表示满足，头头要好好学习天天向上啊”、“恭喜王楚钦，事业学业双丰收，哈哈”、“所以我以后有机会去北体大偶遇大头了么？期待哇”、“哇哦，大头都要读大学了，本姐姐粉为你骄傲”。
练习2：图片布局 Document body{ background-color: #f5f5f5; } .goods{ width: 234px; height: 200px; background-color: #fff; /* 标签居中 margin */ margin: 0 auto; /* 内容居中 图 文字 */ text-align: center; } img{ width: 160px; } .st{ font-size: 14px; line-height: 25px; } .time{ color: #ccc; font-size: 12px; line-height: 30px; } .content{ font-size: 14px; color: #ffa500; }
莎头德班·回忆录
2023.5.20-2023.5.28
顶峰相见
|
【本文地址】
今日新闻 |
推荐新闻 |