厂房出租做推广什么网站好,国外服务器品牌前十大排名,网站做302重定向,企业网站属于哪种网站类型一、css基础样式
html: 标签 网页骨架
css: 美化这个网页的骨架 样式去装饰网页
1. css 层叠样式表 (英文全称: Cascading Style Sheets)
修饰网页内容 比如: 文字大小 颜色 网页排版 高宽等等
2. css写在哪里?——行内样式 内部样式 外部样… 一、css基础样式
html: 标签 网页骨架
css: 美化这个网页的骨架 样式去装饰网页
1. css 层叠样式表 (英文全称: Cascading Style Sheets)
修饰网页内容 比如: 文字大小 颜色 网页排版 高宽等等
2. css写在哪里?——行内样式 内部样式 外部样式
行内样式:
写法: 直接写在标签中的属性中
例子: 标签名 stylecss代码
优点: 书写简单
缺点: 不利于维护 样式和结构也没有分离
使用次数:很少使用 !-- 行内样式的写法 -- !-- p stylecss代码这是一段文本/p -- 内部样式:
写法: 直接写在html文档里面 通过style标签 style标签 通常放置于head里面的title下方
优点:比较利于维护 部分结构和样式分离
缺点: 没有真正的结构和样式 还是在写在一个html里面
使用次数:常用 head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title !-- 内部样式 -- !-- style:样式表标签 -- style /* 在这里书写css代码 */ /* 这个是css代码的注释 快捷键ctlr/ */ /style /head 外部样式:
写法: 1.单独创建一个文件 并且文件后缀名是.css 2.通过link标签进行引入 link通常放到头部位置
优点:结构和样式 分离 可以重复利用
缺点: 对于新手 书写麻烦要引入
使用次数:开发中使用次数最多 写项目推荐写法 head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title !-- 外部样式写法: link:链接标签 rel:规定你的文档是什么格式 stylesheet:样式表 -- link relstylesheet href./index.css /head css文件中内容形式 /* 书写我的外部样式文件 */ /* 标签名选择器 */ span{ color: pink; } 同一个标签 写三种样式写法: 就近原则 ——行内样式 内部和外部
二、初级选择器
1.标签名选择器—— 标签名{} /* 标签名选择器 找到叫div 去添加 */ div{ color: pink; } 2.id选择器——给标签设置一个id属性 (idid名) 写样式找这个以#id名进行添加
命名是唯一 不允许重复 就好比你的身份证号一样
出现了相同id名会导致 你后续js获取元素
单个标签只能写一个id名 命名规范:
(1).不可以单独以数字或者单个字母命名 (比如: 1 a 等)
(2).不规范命名(列如: a1 a2 a3 ..... 不规范写法 )
(3).不能直接写中文 也最好不要用拼音 尽量百度翻译一下
(4).见名知意 看到这个单词就知道什么意思 规范的话取名驼峰命名 (userName)
(5).符号 规范(_ -) /* id选择器 权重 10 */ #wrap { color: red; } body内部 div classbox text idwrap颜色/div 3.类名选择器——class
不是唯一 可以写多个类名
给标签添加一个 class属性 以.类名
允许不同的标签用相同的类名 /* 类名选择器 权重 1*/ .box{ color: green; } body内部 div classbox text idwrap颜色/div 4.后代选择器 空格隔开 例子: 父 后代{} /* 给后代添加样式 找到id名叫Box 里面的后代叫p的添加样式 */ #Box p{ color: green; } body内部 div idBox p我是文本/p a href p我是放到a标签中的p/p /a /div 5.子级选择器 例子: 父子{} /* 子级选择器 */ /* #Boxp{ color: blue; } */ /* 找到id叫box的子级 叫p的标签 只会找子级 不会找孙子 */ 6. 通配符 *{} /* 通配符选择器 *{} 用来清除网页默认自带的样式 */ *{ /* color: red; */ /*通配符作用 主要 清除内外边距 */ /* 外边距 */ margin: 0px; /* 内边距 */ padding: 0px; } 7.相邻选择器 以兄挨着最近的一个弟弟 /* 相邻选择器 */ /* spanb{ color: green; } */ 8. 同级兄弟选择器 兄~弟 /* 同级兄弟选择器 哥哥 找弟弟 没有弟弟往上走的 */ /* span~b{ color: orange; } */ 9.交集选择器 p.text{} /* 交集选择器 找到p标签中有text类名的 */ /* p.text{ color: pink; } */ 10.并列选择器 /* 并列/合并选择器 ,理解为 和 的意思 */ div,p,span{ color: green; } 11.选择器优先权 权重——!important 行内样式 id class 标签名 通配符 继承
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* id选择器 权重 10 *//* #wrap {color: red;} *//* 类名选择器 权重 1*//* .box{color: green;} */.text {/* 文字大小 */font-size: 25px;}/* 给后代添加样式 找到id名叫Box 里面的后代叫p的添加样式 *//* #Box p{color: green;} *//* 子级选择器 *//* #Boxp{color: blue;} *//* 找到id叫box的子级 叫p的标签 只会找子级 不会找孙子 *//* 选中ul标签的后代 叫 li的标签 添加样式 *//* ul li{color: pink;} *//* 通配符选择器 *{} 用来清除网页默认自带的样式 */*{/* color: red; *//*通配符作用 主要 清除内外边距 *//* 外边距 */margin: 0px;/* 内边距 */padding: 0px;}/* 相邻选择器 *//* spanb{color: green;} *//* 同级兄弟选择器 哥哥 找弟弟 没有弟弟往上走的 *//* span~b{color: orange;} *//* 交集选择器 找到p标签中有text类名的 *//* p.text{color: pink;} *//* 并列/合并选择器 ,理解为 和 的意思 */div,p,span{color: green;}/style/headbody!-- class类名选择器 --div classbox text idwrap颜色/divdiv idBoxp我是文本/pa hrefp我是放到a标签中的p/p/a/divulli把大象放进冰箱/lili打开冰箱门/lili放入大象/lili关闭冰箱门/li/ulspan我想挨着加粗标签/spanb给文字加粗/bb这是第二个b/bp classtext这是文本/pp第二段文本/pp classtext第三段文本/p/body/html
