一、导航类导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu子菜单:submenu 标题:title 摘要:summary二、页面结构容器:container 页头:header 内容:content/container 页面主体:main页尾:footer 导航:nav 侧栏:sidebar 栏目:column页面外围控制整体布局宽度:wrapper 左右中:left right center三、功能标志:logo 滚动:scroll 广告:banner 标签页:tab登录:login 文章列表:list 登录条:loginbar 提示信息:msg注册:regsiter 当前的:current 搜索:search 小技巧:tips功能区:shop 图标:icon 标题:title 注释:note加入:joinus 指南:guild 状态:status 服务:service按钮:btn 热点:hot 合作伙伴:partner 新闻:news友情链接:friendlink 下载:download 版权:copyright 投票:vote四、p英文释译标题 title 字体 font 身体 body 大小 size列表 list 文本 text 样式 style 对齐 align图像 image 修饰 decoration 资源 source 线 line宽度 width 穿过 through 高度 height 缩进 indent行 line 斜体 italic 链接 link 加粗 bold斜体 italic 加重 weight 加粗 bold 宽 width输入 input 高 height 下面的 under 背景 background顶部 top 主体 main五、css英文释译重复 repeat 填充 padding 位置 position 正常 normal显示类型 display 父级 parent 显示可见 visibility 子级 children隐藏 hidden 顶部导航topnav显示 visible 溢出 overflow列表 list 样式 style 边框 border 导航 nav广告图片 banner 行高line-height边界 margin 页眉 header六、样式文件命名主要的master.css 模块module.css 基本共用base.css 布局,版面layout.css主题themes.css 专栏columns.css 文字font.css 表单forms.css补丁mend.css 打印print.css七、颜色释译绿 green 红 red 蓝 blue 黑 black灰 gray 黄 yellowa 紫 purple 白 white棕 brown 卡其色 khaki六、命名参考登录条loginBar 标志:logo 侧边栏:sideBar 广告:banner导航:nav 子导航:navBar 菜单:menu 子菜单:subMenu搜索:search 滚动:scroll 页面主体:main 内容:content标签页:tab 文章列表:list 提示信息:msg 小技巧:tips栏目标题:title 加入:joins 指南:guild 服务:service热点:hot 新闻:news 按钮:btn 投票:vote状态:status 合作伙伴:partner 外套:wrap 商标:label顶导航:topnav 左导航:leftSideBar 右导航:rightSideBar菜单内容:menuContent菜单容器:menuContainer注释:note 边导航图标:sidebarIcon版权:copyright友情链接:friendLink容器:container 页脚:footer 当前:current激活:active 购物车:shop 登录:login 注册:regsiter下载:download 面包屑:breadCrumb
CSS 的出现, 实现了网页的结构和样式分离。美容师!
CSS 规则由两个主要的部分构成: 选择器, 以及一条或多条声明
CSS 规则由两个主要的部分构成: 选择器, 以及一条或多条声明
以内嵌式样式表为例
vs code快捷键: ctrl+/
CSS的英文可以大写,也可以小写
建议全部小写!
颜色名就是使用颜色的英文单词进行表示
更多的颜色名可以通过查询手册得到
颜色值指使用具体颜色的数值表示。 包括: rgb 模式和十六进制模式写法
常用颜色的 rgb 色值:
常用颜色的十六进制色值:
注: 十六进制颜色值简写模式: 如果红、 绿、 蓝三个原色的色值每一个都是由重叠的数字组成, 可以将重叠的数字简化成一个进行书写。 如: 红色 #f00
如果不设置字体属性, 不同的浏览器有自己的默认字体
首选字体需要根据设计图确定, 最后需要设置备用字体
缺点: id 选择器只能实现单选, 不能帮我们完成多选的功能
原子类: 在css中提前设置一些类名, 每个类选择器后面只添加一条css样式属性, 这些属性会在页面中常被使用, 后期可以不需要多次书写属性, 只要将对应的类名添加给需要的标签即可
实际工作中, 通常我们有一个使用规律: 类上样式(CSS), id 上行为(JavaScript)
优点: 减少 class 属性的使用, 选择效率更高
继承性是一个很好的性质, 可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>, 后期所有的后代标签都可以从 <body>进行继承