湘潭网站建设厦门网站制作,自定义内容网站,网站的弹窗对话框怎么做,建设银行企业网站银行1、CSS定义
层叠样式表#xff08;Cascading Style Sheets#xff0c;缩写为CSS#xff09;#xff0c;是一种 样式表 语言#xff0c;用来描述 HTML 文档的呈现#xff08;美化内容#xff09;。
书写位置#xff1a;title 标签下方添加style双标签#xff0c;styl…1、CSS定义
层叠样式表Cascading Style Sheets缩写为CSS是一种 样式表 语言用来描述 HTML 文档的呈现美化内容。
书写位置title 标签下方添加style双标签style标签里面书写CSS代码。 2、CSS引入方式
内部样式表学习使用 css代码写在style标签里面外部样式表开发使用 css代码写在单独的css文件中.css在HTML使用link标签引入 行内样式配合JavaScript使用 css写在标签的style属性值里 3、选择器
作用查找标签设置样式
基础选择器
标签选择器类选择器id选择器通配符选择器
3.1 标签选择器
使用标签名作为选择器 ---选中同名标签设置相同的样式。
例如ph1divaimg…… 3.2 类选择器
作用查找标签差异化设置标签的显示效果。
步骤
定义类选择器 --- .类名使用类选择器 --- 标签添加 class类名 注意
类名自定义不要用纯数字或中文尽量用英文命名一个类选择器可以供多个标签使用一个标签可以使用多个类名类名之间用空格隔开
开发习惯类名见名如意多个单词可以用 - 连接例如news-hd
3.3 id选择器
作用查找标签差异化设置标签的显示效果
场景通过id属性值找到页面中带有这个id属性值的标签设置样式
步骤
定义id选择器 --- #id名使用id选择器 --- 标签添加 id “id名” 规则同一个id选择器在一个页面只能使用一次
注意点
所有标签上都要id属性id属性值类似于身份证号码在一个页面中是唯一的不可重复的一个标签上只能有一个id属性值一个id选择器只能选中一个标签
3.4 类与id的区别
class类名与id属性值的区别 class类名相当于姓名可以重复一个标签可以同时有多个class类名id属性值相当于身份证号码不可重复一个标签只能有一个id属性值类选择器与id选择器的区别 类选择器以 . 开头id选择器以 # 开头实际开发情况 类选择器用的最多id一般配合js使用除非特殊情况否则不要使用id设置样式实际开发中会遇到冗余代码的抽取可以将一些公共的代码抽取到一个公共的类中去
3.5 通配符选择器
作用查找页面所有标签设置相同样式。
通配符选择器 *不需要调用浏览器自动查找页面所有标签设置相同的样式 4、画盒子
目标使用合适的选择器画盒子 属性名作用width宽度height高度background-color背景色 5、文字控制属性 5.1 字体大小
属性名font-size
属性值文字尺寸PC端网页最常用的单位px 注意点
谷歌浏览器默认文字大小是16px单位需要设置否则无效
5.2 字体粗细
属性名font-weight
属性值 5.3 字体样式是否倾斜
作用清除文字默认的倾斜效果
属性名font-style
属性值
正常不倾斜normal倾斜italic
5.4 行高
行高包括上间距文本高度下间距
作用设置多行文本的间距
属性名line-height
属性值
数字px数字当前标签font-size属性值的倍数
行高的测量方法从一行文字的最顶端最底端量到下一行文字的最顶端最底端 5.4.1 行高-垂直居中
垂直居中技巧行高属性值等于盒子高度属性值 5.5 字体族
属性名font-family
属性值字体名 拓展了解font-family属性值可以书写多个字体名各个字体名用逗号隔开执行顺序是从左向右依次查找。
font-family属性最后设置一个字体族名网页开发建议使用无衬线字体 无衬线字体sans-serif 特点文字笔画粗细均匀并且首尾无装饰场景网页中大多采用无衬线字体常见该系列字体黑体、Arial衬线字体serif 特点文字笔画粗细不均并且首尾有笔锋装饰 场景报刊书籍中应用广泛 常见该系列字体宋体、Times New Roman 等宽字体monospace 特点每个字母或文字的宽度相等 场景一般用于程序代码的编写有利于代码的阅读和编写 常见该系列字体Consolas、fira code
5.6 font复合属性 使用场景设置网页文字公共样式 复合属性属性的简写方式一个属性对应多个值的写法各个属性值之间使用空格隔开。
font是否倾斜 是否加粗 字号/行高 字体必须按顺序书写 注意字号和字体值必须书写否则font属性不生效 5.7 文本缩进
属性名text-indent
属性值
数字px数字em推荐 1em 当前标签的字号大小 5.8 文本对齐方式
作用控制内容水平对齐方式
属性名text-align
属性值 5.9 水平对齐方式-图片
text-align本质是控制内容的对齐方式属性要设置给内容的父级。 5.10 文本修饰线
属性名text-decoration
属性值 5.11 color文字颜色
属性名color
属性值 6、调试工具-谷歌浏览器
作用检查、调试代码帮助程序员发现代码问题、解决问题 1、打开调试工具
浏览器窗口内任意位置 / 选中标签 --- 鼠标右键 --- 检查F12
2、使用调试工具 调试工具的细节
1.如果是错误的属性有黄色叹号
2.CSS属性的前面有多选框如果勾选这个属性生效如果没有勾选这个属性不生效。 综合案例一新闻详情 网页制作思路
1.从上到下先整体在局部
2.先标签再CSS美化
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {text-align: center;font-weight: 400;font-size: 30px;color: #333;}div {font-size: 14px;color: #999;}p {text-indent: 2em;font-size: 18px;color: #333;}.pic {text-align: center;}/style
/head
bodyh1在希望的田野上|湖北秋收开镰 各地多举措保增产增收/h1div来源央视网 | 2222年12月12日 12:12:12/divpstrong央视网消息/strong眼下湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成玉米收割七成。湖北省通过大力推广新品种水稻建设高标准农田等一系列措施为秋粮稳产提供有力支撑。/pp中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市370万亩中稻已经收割四成以上。/pdiv classpicimg src../photo/4.png alt/divp王化林说的新品种是湖北省研发的杂交水稻“华夏香丝”不仅产量高还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内像“华夏香丝”这样抗旱节水的品种还有20多个这些水稻新品将在荆门全面推广确保来年增产增收。/pp此外湖北还大力推进高标准农田建设。截至今年6月已建成3980万亩高标准农田。目前湖北全省仍有1800多万亩中稻正在有序收割中预计10月中旬收割完毕。/p
/body
/html
综合案例二-css简介 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {color: #333;}p {text-indent: 2em;font-size: 14px;color: #444;line-height: 30px;}a {color: #0069c2;}li {font-size: 14px;color: #444;line-height: 30px;}/style
/head
bodyh1css层叠样式表/h1p层叠a href#样式表/a(英文全称Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用或XML标准通用标记语言的一个子集等文件样式的计算机语言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。/ppstrongCSS是一种定义样式结构/strong如字体、颜色、位置等的语言被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式样式单包含将样式应用到指定类型的元素的规则。外部使用时样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。/pulliCSS为HTML标记语言提供了一种样式描述定义了其中元素的显示方式。/liliCSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。/liliCSS参考针对资深Web开发者的a href#详细参考手册/a描述了CSS的各个属性与概念。/li
/body
/html
