前端Web开发(2)
CSS引入方式CSS一种样式表语言用来描述HTML文档的呈现(美化内容)内联样式配合JavaScript使用直接在HTML元素的style属性中编写CSS规则。p stylecolor: red; font-size: 16px;示例文本/p内部样式表学习使用在HTML文档的head部分(title标签下方)使用style标签定义CSS规则。head style p { color: blue; font-size: 14px; } /style /head外部样式表开发使用通过link标签引入独立的.css文件。head link relstylesheet hrefstyles.css /head选择器作用查找标签设置样式基础选择器标签选择器、类选择器、id选择器、通配符选择器标签选择器使用标签名作为选择器—选中同名标签设置相同的样式类选择器作用查找标签差异化设置标签的显示效果。定义类选择器—.类名使用类选择器—标签添加class类名style /*定义类选择器*/ .red { color: red; } /style !--使用类选择器-- div classred这是div标签/div注一个类名可以给多个标签使用一个标签可以使用多个类名class属性值写多个类名用空格隔开。id选择器作用查找标签差异化设置标签的显示效果。场景一般配合JavaScript使用很少用来设置CSS样式。定义id选择器—#id名使用id选择器—标签添加idid名style /*定义id选择器*/ #red { color: red; } /style !--使用id选择器-- div idred这是div标签/div注同一个id选择器在一个页面只能使用一次通配符选择器作用查找页面所有标签设置相同样式通配符选择器*不需要调用浏览器自动查找页面所有标签设置相同的样式例如* { color: red; }就是将所有标签内的全部内容都变成红色。画盒子目标使用合适的选择器画盒子属性名作用width宽度height高度backgroung-color背景色文字修饰属性描述属性效果字体大小font-size字体粗细font-weight文字文字字体倾斜font-style文字文字行高line-height文字文字字体族font-family字体复合属性font复合属性文本缩进text-indent前端开发也叫客户端开发主要负责网站、APP、小程序所有能看得见、摸得着、能交互的界面部分。文本对齐text-align对齐方式修饰线text-decoration文字文字文字颜色color文字文字字体大小PC网页常用单位为px字体粗细数字正常400 加粗700关键字正常normal 加粗bold字体倾斜正常normal 倾斜italic行高属性值数字px 或 数字(当前标签font-size值的倍数)测量方法从一行文字的顶端(底端)到下一行文字的顶端(底端)当行高(line-height)高度(height)文字便可垂直居中但只适用于单行文字字体族font-family属性值可以书写多个字体名各个字体名用逗号隔开执行顺序是从左到右依次查找font复合属性属性的简写方式一个属性对应多个值的写法各个属性值之间用空格隔开font是否倾斜 是否加粗 字号/行高 字体 (必须按顺序书写)注意字号和字体值必须书写否则font属性不生效文本缩进属性值数字 px数字 em推荐:1em当前标签字号大小)(常用)文本对齐方式属性值效果left左对齐(默认)center居中对齐(居中的是字而不是标签)right右对齐文本修饰线属性值效果none无去掉修饰线underline下划线line-through删除线overline上划线color文字颜色颜色表示方式属性值说明使用场景颜色关键字颜色英文单词red、green、blue...学习测试rgb表示法rgb(r,g,b)r,g,b表示红绿蓝三原色取值0-225了解rgba表示法rgba(r,g,b,a)a表示透明度取值0-1开发使用实现透明色十六进制表示法#RRGGBB#000000,#ffcc00,简写:#000,#fc0开发使用(从设计稿复制)