Web前端技术(1)
CSS:用于装饰HTML所用的语句,一般用于作色和占位。
CSS选择器知识
在标签上设置style属性:
<div style="background-color: #2459a2;;height: 48px;">Hello</div>
如果想要让多个div有样式?怎么办?
第一种方式(low):
不规范的伪高端方式(ID选择器)不推荐使用:
在<head>标签下面写<style>标签,在<style>标签中声明以#开头的CSS样式;通过id给某个标签设置CSS属性,这就是ID选择器.
高端方式(class选择器)建议使用:
声明一个以.开头的<style>标签,里面编写CSS样式,在标签中设置class=id就可以给标签设置CSS属性,这就是class选择器.
你可能会问:如何给所有的div一次性加上CSS属性呢?
别急,听我慢慢道来...
标签选择器:
先在<head>标签下的<style>中写上一个div标签,里面设置上css属性,这就是标签选择器.
代码的意思是所有的div标签都设置黑色的背景颜色,字体为白色。
层级选择器(空格):
代码的意思是找class id等于c1下的div标签,然后设置上CSS属性。
组合选择器(逗号):
代码的意思是给ID为i1,i2,i3的标签添加CSS样式;也可以把#号改为.换成class选择器的模式。
属性选择器:
代码的意思是给属性为type="text"的<input>标签添加CSS样式。
较为复杂的方式:
代码的意思是给class选择器ID为c1,属性n="test"的标签添加CSS样式;也就是对选择到的标签,再通过属性进行一次筛选。
CSS样式优先级
如果<style>标签中有相同属性的代码,优先级应该是怎么样的?
通过审查元素可以看出来,浏览器会优先使用标签中style属性定义的pink颜色,然后以从下往上的方式(就近原则)应用<style>标签中的样式。
此时,你可能会问,如何在其他文件中使用这个CSS样式?
引用CSS文件方法:
将CSS样式写在单独文件中,然后引入。
<link rel="stylesheet" href="css/commons.css"/>
<div class="c1 c2">Hello</div>
CSS边框以及常用样式
实线边框
<div style="border: 1px solid red">Hello</div>
虚线边框
<div style="border: 1px dotted red">Hello</div>
居中
text-align: center; 水平居中
line-height:500px; 垂直居中;像素必须是height的像素
字体加粗
font-weight: bold;
float标签
float标签作用:让标签飘起来,块级标签可以堆叠
<div style="width: 10%; background-color: red;float: left;">Hello</div>
<div style="width: 90%; background-color: black;float: right;">Hello</div>
效果:
让边缘消失:
<body style="margin: 0 auto;">
效果:
Demo:
display用法
<div style="background-color: red;display: inline;">Hello</div> 让块级标签变成行内标签
<span style="background-color: red;display: block;">Hello span</span> 让行内标签变成块级标签
问题:行内标签无法设置宽度,高度,块级标签不可以设置。
使用inline-block参数解决问题<
span style="background-color: red;height: 300px;width: 300px;display: inline-block;">Hello</span> 具有inline和block的属性
<span style="background-color: red;height: 300px;width: 300px;display: none;">Hello</span> 让标签消失
内边距与外边距(padding margin)
意思是取消边框的外边距,让边框看起来是无缝连接的。
静态网站Demo:
a标签与京东进行关联,点击书籍图片就会跳转到京东上这本书的购买页面,登录注册这些功能计划用python的tornado框架或者drajon框架做;过段时间做一个网站来推广v*n服务,虽然有些怕,但是为了生存,还是拼一拼;
日记:
很久没写博客了,不是没有学习,而是不想放上来,我所有学习的笔记都放在Everynote上了,很多技术网上一搜就能找到,没啥特点,其实还是懒:)
我还是有梦想的,我还年轻,20不到,还有这么多年可以奋斗;虽然每天过得很苦逼,虽然没有女朋友,但我相信现在的沉淀,迟早会得到回报的,开Tesla上班,每天和不同的美女睡觉等等,这些都是迟早的事。。。昨天晚上看了个视频,总结就一句话,人懂商业很重要!!!