网站联盟系统天津河东网站建设公司

当前位置： 首页 > news >正文

网站联盟系统,天津河东网站建设公司,wordpress 登陆不了,怎么样制作自己的网站3.1 CSS基础认知#x1f34e; 3.1.1 #x1f441;️#x1f5e8;️CSS概念 CSS#xff1a;层叠样式表#xff08;Cascading style sheets)#xff0c;为网页标签增加样式表现的 语法格式#xff1a; 选择器{!– 属性设置 –属性名:属性值; !–每一个…3.1 CSS基础认知 3.1.1 ️️CSS概念 CSS层叠样式表Cascading style sheets)为网页标签增加样式表现的 语法格式 选择器{!– 属性设置 –属性名:属性值; !–每一个键值对属性写完之后都要加 英文 ;g隔开– } 比如 p{color:red; } CSS常见属性 作用 color 文字颜色 background-color 背景颜色 background-image 背景图片 font-size 字体大小 width 宽度 height 高度
3.1.2 CSS的引入方式

1. 内嵌式 写在style标签style标签一般在head中title下面 style/* 内嵌式 */p{/*属性设置》 属性名属性值 /color: red;/ 文字大小 /font-size: 50px;/ 背景颜色 /background-color: yellow;/ 宽度 高度 // width: 60px;height: 600px; */}/style p你好世界/p
2. 外联式 写在一个单独的.css文件中通过link标签进行导入 !– link 标签 导入外联的css样式 –link relstylesheet href./css/01-css.css div 这是div标签-演示外联式CSS /div
3. 内联式 直接写在标签的style属性中 !– 内联式直接写在标签里面 – span stylecolor: springgreen; font-size: 90px; 这是span标签-用来演示内联式/span 3.2 基本选择器️ 3.2.1 标签选择器 通过标签名去控制对应标签的样式 标签选择器是一次性控制整个页面对应的标签 语法 标签名{属性属性值 } headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color: red;font-size: 20px;}/style /head body!– 演示标签选择器 –p这是span标签-用来演示标签选择器/ppp1 /ppp2 /pp p3/pp p4/pdivollip这是嵌套的p标签/p/li/ol/div /body 3.2.2 类选择器 通过类名找到页面中所有带有这个类名的标签设置样式 class类名 语法 .类名{属性值 } headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 类选择器 .类名 /.xzq03{color: aqua;font-size: 30px;}.p03{background-color: red;}/style /head bodyp 这是第一个p标签/pp classxzq03 这是第二个p标签有类名的p标签/p!– 多个类名 –p classxzq03 p03 这是第三个p标签有类名的p标签/pspan classxzq03 span03这是span标签/spandiv classxzq03这是div标签/div /body 注意点 所有标签上都有class属性class属性的属性值称为类名类似于名字类名可以由数字、字母、下划线、中划线组成但不能以数字或者中划线开头一个标签可以同时有多个类名类名之间以空格隔开类名可以重复一个类选择器可以同时选中多个标签 3.2.3 id选择器 通过id属性值找到页面中带有这个id属性值的标签设置样式 语法 #id名{属性值 } headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#ix{font-size: 40px;}#sx{background-color: red;}/style /head bodyp idix sx这是p标签-测试id选择器/pp idix这是p标签-测试id选择器/pspan idix这是span标签/spandiv idix这是div/div /body 3.2.4 通配符选择器 以通配符“”直接选择设置整个页面的标签 语法 {属性值 } headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle{color: red;font-size: 40px;}/style /head bodyp111/pp222/pspan这是span/spandiv这是div/div /body 3.3 CSS样式层叠 一个标签有多个相同的属性比如设置两个 color最后就会覆盖第一个一最后的样式为准 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{/* 后面的属性会覆盖掉前面的属性 /font-size: 60px;font-size: 20px;color: red;color: violet;}/style /head bodyp这是p标签/p /body /html 3.4 字体和文本的基础样式 3.4.1 字体样式 字体大小font-size 格式 font-size:数值px 要跟px单位不跟没有效果 字体粗细、倾斜font-weight、font-style !DOCTYPE html html langen headstylep{color: red;/ 字体加粗 /font-weight: bold;}div{font-weight: 900;font-style: oblique;}span{font-weight: 100;font-style: italic;}/style /head bodyp这是p标签/pdiv这是div标签/divspan这是span/span /body /html 主体加粗 关键字 正常normal加粗bold 数值 100~900 9个级别依次递增正常400加粗700 字体倾斜 正常normal默认值倾斜italic 字体选择font-family !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{/ font-family:微软雅黑,黑体,宋体; /font-family:Georgia, Times New Roman, Times, serif;}/style /head bodyp这是一个p标签/pdiv这是div/div /body /html 常见取值具体字体1,具体字体2,具体字体3,具体字体4,…, 具体字体Microsoft YaHei、微软雅黑、黑体、宋体等……字体系列sans-serif、serif、monospace等…… 注意 从左往右按照顺序查找如果字体名称中存在多个单词推荐使用引号包裹最后一项尽量使用系统常见自带字体 font连写 直接将字体系列的 font…属性写在一起 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{/ font-size: 40px;font-weight: 900;font-style: italic; // font 连写 // font : style weight size family;连写的顺序 // font连写- 按照顺序写- 只能省略前两个属性style、weight/font: italic 900 90px 黑体 ;/ font: 900px 宋体; /}/style /head bodyp这是p标签/p /body /html 注意 font连写时按照顺序写font : style weight size family;font连写可以省略前2个属性style、weight 3.4.2 文本样式 首先缩进text-indent 可以跟 数值px可以指定字em(一个em 表示一个字大小) 对齐方式text-align 居中:center右对齐right左对齐left 文本修饰text-decoration underline:下划线line-through:删除线overline:上划线none:去掉所有文本修饰 !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本样式/titlestylep{/ 首先缩进text-indentpx像素值// text-indent: 40px; */text-indent: 2em;/em:一个字//* 对齐居中:center 右对齐right左对齐left/text-align: left;/ 文本修饰text-decorationunderline:下划线line-through:删除线overline:上划线none:去掉所有文本修饰/text-decoration: underline;}div{text-decoration:line-through;}span{text-decoration: overline;}.p1{text-decoration: none;}/style /headbodyp classp1前端开发是创建WEB页面或APP等前端界面呈现给用户的过程通过HTMLCSS及JavaScript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互 。/pp前端开发从网页制作演变而来名称上有很明显的时代特征。在互联网的演化进程中网页制作是Web1.0时代的产物早期网站主要内容都是静态以图片和文字为主用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用现代网页更加美观交互效果显著功能更加强大。/pdiv这是div标签/divbrspan这是span/span /body/html 3.4.3 ️行高 每一行字体所占的高度line-height 行高取值 数值pxem一个em就表示一个字的大小font-size的倍数(一般情况下浏览器默认字体大小是 16px) 可以font连写font : style weight size/line-height family ; !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/ 行高 /p{/ line-height: 30px; // line-height: 3em; */line-height: 4;/*谷歌默认16px */} /style /head bodyp前端开发从网页制作演变而来名称上有很明显的时代特征。在互联网的演化进程中网页制作是Web1.0时代的产物早期网站主要内容都是静态以图片和文字为主用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用现代网页更加美观交互效果显著功能更加强大。/p /body /html