兴安盟老区建设促进会网站,网站开发项目计划书,wordpress会员多语言,用自己电脑做网站服务器文章目录前言相关概念【了解】脚本语言什么是脚本语言脚本语言有什么特点常见的脚本语言什么是动态语言#xff0c;什么是静态语言动态语言和静态语言两者之间有何区别CSSCSS是什么CSS的特点一、CSS代码怎么写基本语法规则引入方式内部样式内联样式表外部样式代码风格二、CSS的…
文章目录前言相关概念【了解】脚本语言什么是脚本语言脚本语言有什么特点常见的脚本语言什么是动态语言什么是静态语言动态语言和静态语言两者之间有何区别CSSCSS是什么CSS的特点一、CSS代码怎么写基本语法规则引入方式内部样式内联样式表外部样式代码风格二、CSS的选择器基础选择器1.标签选择器2.类选择器3.id选择器复合选择器1.后代选择器2.子选择器3.并集选择器4.伪类选择器三、CSS的常见元素属性及值字体属性设置字体家族设置字体大小设置字体粗细设置文字倾斜文本属性设置文本颜色设置文本对齐设置文本装饰设置文本缩进设置文本行高背景属性设置背景颜色♋设置背景图片♋设置背景平铺设置背景位置设置背景尺寸四、其他圆角矩形♒生成圆角矩形生成圆形元素的显示模式块级元素行内元素CSS盒子模型边框border内边距padding外边距弹性布局五、小结参考前言 与html一样东西很多比较零碎但是比较散不需要刻意去记 这里边对于后端学习主要掌握类选择器即可。 通过个人博客那里进行练习、文字垂直居中 相关概念【了解】
脚本语言
什么是脚本语言
脚本语言Script lanuages /Scripting programming languages/scripting languages又被称为扩建的语言或者动态语言是一种编程语言用来控制软件应用程序脚本通常以文本如ASCII保存只在被调用时进行解释或编译。
是为了缩短传统的编写-编译-链接-运行edit-compile-link-run过程而创建的计算机编程语言。 几乎所有计算机系统的各个层次都有一种脚本语言。包括操作系统层如计算机游戏网络应用程序文字处理文档网络软件等。在许多方面高级编程语言和脚本语言之间互相交叉二者之间没有明确的界限。 脚本语言是一种解释性的语言。用脚本语言开发的程序在执行时由其所对应的解释器或称虚拟机解释执行。
脚本语言有什么特点
快速开发、容易部署、同已有技术的集成、易学易用、动态代码
常见的脚本语言
C Shell、JavaScript、PHP、CSS、Python、VBScript、Ruby等
什么是动态语言什么是静态语言
动态语言也叫做弱类型语言是运行时次啊确定数据类型的语言变量在使用之前不需要申明类型。例如JS等。
例如var a10; var bacd;
静态语言也叫做强类型语言是编译时变量的数据类型就可以确定的语言大部分静态语言要求在使用变量之前必须声明数据类型例如java 、C/C等。
如果我们已经理解开发和运行的区别这里理解也会更容易一些。
动态语言和静态语言两者之间有何区别
静态语言由于强制声明数据类型动态语言思维不受约束可以任意发挥把更多的精力放在产品本身上几种思考业务逻辑实现
CSS
CSS是什么
CSS即Casscading Style Sheets中文意思是层叠样式表是一种表现HTMl或者XML等文件样式计算机语言。
它可以静态的修饰网页也可以配合各种脚本语言动态地对网页元素进行格式化。
简而言之它就像我们在html中说的一样是皮是化妆术起到界面美化的功能。
CSS的特点 丰富的样式定义 相较于html它允许设置文本、背景属性等。 易于使用和修改 多页面应用 CSS样式表可以单独存放在一个CSS文件中。CSS样式表理论上不属于任何页面文件在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 层叠 层叠就是对一个元素多次设置同一个样式最终呈现的效果是最后一次设置的属性值。而不是就像滤镜一样多层叠加 页面压缩 在使用HTML定义页面效果的网站中往往需要大量或重复的表格和font元素形成各种规格的文字样式这样做的后果就是会产生大量的HTML标签从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中可以大大的减小页面的体积这样在加载页面时使用的时间也会大大的减少。另外CSS样式表的复用更大程度的缩减了页面的体积减少下载的时间。
一、CSS代码怎么写
基本语法规则
选择器若干属性声明
选择器 {一条/多条声明}选择器决定针对谁修改声明决定修改啥. 声明的属性是键值对**. 使用 ; 区分键值对,** 使用 : 区分键和值.
css的注释是/**/这里边的注释是不能嵌套的。 CSS与HTML类似都只是简单的声明有什么但是没有具体的逻辑。 那么css代码写到哪里呢又是怎么运行的呢
简而言之CSS代码的执行最终是需要内嵌到html里边的。所以问题就转移到了我们怎么内嵌这些代码。
主要有三种方式分为内部样式表、行内样式表、外部样式。
实际开发中一般使用外部样式来写CSS让html和CSS相互分离。而初学CSS我们主要使用内部样式表比较简单方便。
引入方式
内部样式
使用stylr标签直接把CSS写到文件中。此时的style标签可以放到任意位置一般建议放到head标签中。 优点能做到样式与页面结构分离 缺点当css内容较多时分离不彻底。 例如 htmlhead/headbody!--style标签可以放到代码的任意部分--stylep{color: red;}/stylep这是一个段落/p/body
/html内联样式表
通过 style 属性, 来指定某个标签的样式 说明只适合于写简单样式. 只针对某个标签生效. 缺点: 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式. 内联样式内部样式外部样式 例如 htmlhead/headbody!--style标签可以放到代码的任意部分--p stylecolor:green;font-size: 50px;这是一个段落/p/body
/html外部样式
把css单独创建一个 css 文件使用 link 标签引入 css 。
这也是实际开发中使用最多的一种方式。
而当前只是为了熟悉语法规则所以使用的内部样式/内联样式
link relstylesheet href[CSS文件路径]!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS练习/titlelink relstylesheet hrefstyle.css
/headbody!--style标签可以放到代码的任意部分--p这是一个段落/pp这是另一个段落/p/body
/htmlp{color: blue;font-size: 100px;
}代码风格 推荐使用展开风格 紧凑风格 和展开的更推荐使用展开的风格。 p{ color: red; font-size: 30px;}
p {color: red;font-size: 30px;
}大小写不区分但是开发统一使用小写字母 空格规范冒号后加空格、选择器和{之间也加空格 css基本的代码结构组成——选择器属性我们已经知道下边就开始正式学习。 二、CSS的选择器
选择器的分类CSS2标准下分为基础选择器和复合选择器两大类。
基础选择器
1.标签选择器
在{前边写标签名字意味着选中当前页面中所有的指定标签 但是有很多时候我们想要p标签中部分段落设置成这个属性这显然不太合适这个时候类选择器的使用就非常有必要了。
2.类选择器
可以手动创建CSS类手定指定哪些元素应用这个类与java里的类不同只是一个属性的集合 定义类需要使用.开头 引用这个类时需要通过class这个属性不需要再加点。 例如 htmlhead/headbodystyle.one{color:red;}.two{color: green;}.three{color: pink;}/style div classone这是第一个div/divdiv classtwo这是第二个div/divdiv classthree这是第三个div/div/body
/html注意同一个div可以同时引用多个类多个类之间使用空格分割可以层叠如果是同一个类型的都是颜色的话最终效果是最后一个样式。 改动的代码 div classone four这是第一个div/div 这里我们还可以通过浏览器的控制台进行查看 3.id选择器
HTML页面中的每个元素都可以设置一个唯一的id作为元素的身份标识。
给元素安排id之后就可以通过id选中对应的元素了。
与类选择器不同id选择器只针对唯一的元素生效而类选择器是可以让多个元素应用到同一个类的。
使用方式定义时使用#表示id选择器使用时不用带# 例如 htmlbodystyle#onediv{color: red;}#twodiv{color: greenyellow;}#threediv{color: blueviolet;}/stylediv idonediv这是第一个div/divdiv idtwodiv这是第二个div/divdiv idthreediv这是第三个div/divdiv idonediv这是第四个/div/body
/html复合选择器
CSS除了支持简单的基础选择器还支持更复杂一些的“复合选择器”其实也就是将前边的基础选择器进行组合。
1.后代选择器
把前边的多个简单的基础选择器组合一下可以是标签、类、Id的任意组合
标签之间采用空格进行分割。 例标签标签 html
head/headbody/bodystyleul li{color:antiquewhite;}/styleolliaaa/lilibbb/liliccc/li/olulliaaa/lilibbb/liliccc/li/ul/body
/html这里的后代选择器就是先写父标签、再写子标签 注意这里li只要是ul的后代即可不一定是子元素孙子也可以重孙也可以…… 例类选择器标签 html
head/headbody/bodystyle/*ul li{color:antiquewhite;}*/.onediv li{color: red;}/styleolliaaa/lilibbb/liliccc/li/olul classonedivliaaa/lilibbb/liliccc/li/ul/body
/html例id选择器标签 html
head/headbody/bodystyle/*ul li{color:antiquewhite;}*/#onediv li{color: red;}/styleolliaaa/lilibbb/liliccc/li/olul idonedivliaaa/lilibbb/liliccc/li/ul/body
/html2.子选择器
也是把多个简单的基础选择器组合标签类id选择器任意组合
使用进行分割
但是与后代选择器有所区别的是只找匹配的子元素不找孙子元素 body /styleolli/lilibbb/liliccc/li/olul classonedivliaaa/lilibbb/liliccc/liolli111/lili222/lili333/li/ol/ul/body3.并集选择器
使用,进行分割也是将其他简单选择器进行组合。
效果多组选择器应用了同样的样式 例如 style.two{color:green;} .three{font-size:50px;}.two,.three{font-size:40px;}/stylediv classtwo three这是一个段落/divdiv classtwo这是另一个段落/divdiv classthree这是另另一个段落/div4.伪类选择器
前边的选择器是选中某个元素伪类选择器是选中某个元素的某个状态。
伪类选择器有很多这里我们只介绍两种鼠标悬停状态、鼠标点击状态 例如 style.one:hover{color:blue;font-size:50px;} .one:active{color: cadetblue;font-size: 30px;}/stylediv classone这是一个段落/div三、CSS的常见元素属性及值
CSS常见属性就是具体样式的设置了。样式涵盖很多方面包括不限于大小、位置、颜色、形状、边框、特殊滤镜、过度效果、动画等。
我们只需要记住些常用的其他的用到之后再去查即可。
字体属性
设置字体家族
eg:
font-family: 微软雅黑;
font-family: Microsoft YaHei;注意
最好使用系统自带的字体否则还需自己装上浏览器请求指定的服务器获取指定字体文件才能正确设置字体名称可以使用中文但不建议如果字体有空格需要加引号
设置字体大小
eg:
font-size: 20px;浏览器的每个文字都可以视为一个方框。 若中文一般是个正方形 若英文阿拉伯数字方框比较窄 注意当我们去测量时使用截图工具只有我们的浏览器缩放设置和显示器的缩放设置都是100%时才能得到正确结果或者说你知道你这两个设置的比率然后进行计算也可以 注意
不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)标签需要单独指定大小
设置字体粗细
实际设置时有两种典型的设置风格
1.使用单词【normal\bold\lighter\bolder】 2.数字【范围是1-100】
eg:
font-weight: bold;
font-weight: 700;设置文字倾斜
eg:
font-style: italic;/*倾斜*/
font-style: normal;/*正常*/通过这些样式我们其实就可以将一个普通段落设置h1的格式了 例将普通段落不通过h1标签设置成h1的格式 文本属性 背景知识计算机如何表示颜色 颜色是不同波长的光日常看到的很多光都是混合成的红绿蓝三原色等比例混合。 所以计算机表示颜色可以通过一种典型方式RGB的表示方式。 前端中给RGB各分配一个字节每个字节的范围都是0-255/00-FF 实际表示color:rgb(xx,xx,xx); 通过这三个分量不同比例的搭配就可以调和出不同的颜色。 实际上使用哪个颜色有美工组不用你操心。若没有可以自己看到哪个颜色好看去查它的参数使用qq截图下边会显示。例如 这里边的牛皮纸的颜色就可以通过这里的rgb参数设置直接拿到 设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);其中如果十六进制下每个分量的两个十六进制都相同就可以把16进制缩写成3位十六进制。例如AABBCCABC
不仅是color会遵守这套规则其他跟颜色相关的属性也是这样表示颜色的——单词、十六进制、rgb
设置文本对齐
text-align: [值];靠左靠右居中分别对应三个单词——left、right、center
设置文本装饰
text-decoration: [值];underline 下划线. [常用]none 啥都没有. 可以给 a 标签去掉下划线.overline 上划线. [不常用]line-through 删除线 [不常用]
设置文本缩进
text-indent: [值];单位可以使用 px 或者 em使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.【element】【可以说他俩都是相对单位】
缩进可以是负的, 表示往左缩进,不过这样会导致文字就冒出去了
设置文本行高 背景知识通过行高间接设置行间距 行高文字高度行间距 line-height: [值];这里值使用的单位是px 这里我们通过浏览器控制台那里查看效果 这里我们设置可以通过鼠标滚轮或者上下方向键直接调整这里的值看一个动态的效果 背景属性
设置背景颜色♋
background-color: [指定颜色]单词、rgb、16进制数默认是 transparent (透明) 的. 可以通过设置颜色的方式修改
设置背景图片♋
background-image: url(...);绝对、相对、网络路径均可。url 上可以加引号, 也可以不加
设置背景平铺
background-repeat: [平铺方式]取值有repeat: 平铺、no-repeat: 不平铺、repeat-x: 水平平铺、repeat-y: 垂直平铺
默认是 repeat
设置背景位置
background-position: x y;参数有三种风格:
方位名词: (top, left, right, bottom)精确单位: 坐标或者百分比(以左上角为原点)【计算机的坐标体系跟常用的有区别】混合单位: 同时包含方位名词和精确单位
设置背景尺寸
background-size: length|percentage;这里可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px,也可以填百分比: 按照父元素的尺寸设置.
contain是让图片尽可能变大尽量等比例放大
cover:是让图片铺满 因此我们可以使用background系列属性代替img标签。 四、其他
圆角矩形♒
html默认都是尖角矩形这里我们介绍css中圆角矩形的引入和使用。
border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈
生成圆角矩形 例如 stylediv {width: 200px;height: 100px;border: 2px solid green;background-color: #fab;line-height: 90px;text-align: center;border-radius: 10px;}/stylediv哈哈/div生成圆形
一直调整参数即可 元素的显示模式
块级元素
display:block
行内元素
display:line 任何一个html标签的显示模式块级/行内都是可以设置的 关于块级元素和行内元素的区别 跨级元素会独占一行行内元素不独占一行块级元素高度宽度内外边距都是可以设置的行内元素幺蛾子比较多块级元素默认宽度是和父元素一样宽行内元素默认宽度和里边一样宽 没必要记这是前端的面试题这里就记住一句话块级元素比较正常、行内元素幺蛾子比较多。一般需要的话需要把行内元素转成块级元素。
CSS盒子模型
盒子模型描述了html元素基本的布局规则。 这个盒子由这几个部分构成
边框 border内容 content内边距 padding外边距 margin
边框border
其中边框border属性可以直接设置四个方向也可以单独设置某个属性分别是border-left、border-right、border-top、border-bottom
设置边框需要设置三个方面
粗细: border-width样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框颜色 border-color
设置完尺寸会改变的问题 很多时候我们不希望撑大盒子可能会影响该元素与其他元素的相对位置
解决办法使用专门的属性防止盒子被撑大
box-sizing: border-box;stylediv {width: 200px;height: 100px;border: 2px solid green;background-color: #fab;line-height: 90px;text-align: center;border-radius: 10px;/*box-sizing:border-box;*/border:10px green solid;/*顺序最好不要变*/}/stylediv哈哈/div内边距padding
使用方法有以下两大种其中直接写padding的分支下边又分为3种
eg:paddng-left/padding-right/padding-top/padding-bottom:10pxeg:padding:xxxxxxxx padding: 10px【上下左右都是10px】padding:10px 20px【上下都是10px,左右都是20px】padding:10px 20px 30px 40 px【表示的顺序依次是上右下左顺时针方向】 只在原来的基础上加上一个padding-left:10px 只在原来的基础上加上一个padding:10px 只在原来的基础上加上一个padding:10px 20px 只在原来的基础上加上一个padding:10px 20px 30px 40px 外边距
设置的是元素跟元素之间的距离
margin的写法跟padding差不多也是可以分4个方向设置。不再演示 注意这里有个特殊的用法把margin-left和margin-right设置auto实现元素居中
注意和前边的元素里边的文字居中设法text-align设置居中进行区分。
这里设置水平居中margin-left:center ;margin-right-center
那设置垂直居中是不是可以这样设置呢margin-top:center;margin-bottom:center;很遗憾不可以哦至于怎么介绍后边再说。 小结 弹性布局
用来实现页面布局的。【即控制某个元素放进指定位置】 发展历史 用法 这里边常用的属性是justify-content、align-items
五、小结
选择器
简单选择器
基础选择器作用特点标签选择器能选中所有相同的标签不能差异化选择类选择器能选出一个或多个标签根据需求选择最灵活最实用id选择器能选出唯一的标签同一个id在一个HTML中只能出现一次
后代选择器
选择器作用注意事项后代选择器选择后代元素可以是孙子元素子选择器选择子代元素只能是亲儿子隔辈儿的孙子也不行并集选择器选择相同样式的元素更好的做到代码复用伪类选择器选择被选中的元素重点掌握a:hover的用法
参考 动态语言与静态语言相关阅读 CSS科普
