Web前端技术(1)

CSS:用于装饰HTML所用的语句,一般用于作色和占位。

 

CSS选择器知识

在标签上设置style属性:

<div style="background-color: #2459a2;;height: 48px;">Hello</div>

 

如果想要让多个div有样式?怎么办?

第一种方式(low):

Web前端技术(1)

 

不规范的伪高端方式(ID选择器)不推荐使用

在<head>标签下面写<style>标签,在<style>标签中声明以#开头的CSS样式;通过id给某个标签设置CSS属性,这就是ID选择器.

Web前端技术(1)

 

高端方式(class选择器)建议使用

声明一个以.开头的<style>标签,里面编写CSS样式,在标签中设置class=id就可以给标签设置CSS属性,这就是class选择器.

Web前端技术(1)

 

你可能会问:如何给所有的div一次性加上CSS属性呢?

别急,听我慢慢道来...

 

标签选择器:

先在<head>标签下的<style>中写上一个div标签,里面设置上css属性,这就是标签选择器.

Web前端技术(1)

代码的意思是所有的div标签都设置黑色的背景颜色,字体为白色。

 

层级选择器(空格):

Web前端技术(1)

 

Web前端技术(1)

代码的意思是找class id等于c1下的div标签,然后设置上CSS属性。

 

组合选择器(逗号):

Web前端技术(1)

 

Web前端技术(1)

代码的意思是给ID为i1,i2,i3的标签添加CSS样式;也可以把#号改为.换成class选择器的模式。

 

属性选择器:

Web前端技术(1)

 

Web前端技术(1)

代码的意思是给属性为type="text"的<input>标签添加CSS样式。

 

较为复杂的方式:

Web前端技术(1)

Web前端技术(1)

代码的意思是给class选择器ID为c1,属性n="test"的标签添加CSS样式;也就是对选择到的标签,再通过属性进行一次筛选。

 

 

CSS样式优先级

如果<style>标签中有相同属性的代码,优先级应该是怎么样的?

Web前端技术(1)

 

Web前端技术(1)

通过审查元素可以看出来,浏览器会优先使用标签中style属性定义的pink颜色,然后以从下往上的方式(就近原则)应用<style>标签中的样式。

 

 

此时,你可能会问,如何在其他文件中使用这个CSS样式?

引用CSS文件方法:

将CSS样式写在单独文件中,然后引入。

Web前端技术(1)


<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>

 

居中

Web前端技术(1)

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>

 

效果:

Web前端技术(1)

 

让边缘消失:

<body style="margin: 0 auto;">

 

效果:

Web前端技术(1)

 

Demo:

Web前端技术(1)

 

 

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)

 

Web前端技术(1)

意思是取消边框的外边距,让边框看起来是无缝连接的。

静态网站Demo:

Web前端技术(1)

a标签与京东进行关联,点击书籍图片就会跳转到京东上这本书的购买页面,登录注册这些功能计划用python的tornado框架或者drajon框架做;过段时间做一个网站来推广v*n服务,虽然有些怕,但是为了生存,还是拼一拼;

日记:

  很久没写博客了,不是没有学习,而是不想放上来,我所有学习的笔记都放在Everynote上了,很多技术网上一搜就能找到,没啥特点,其实还是懒:)

  我还是有梦想的,我还年轻,20不到,还有这么多年可以奋斗;虽然每天过得很苦逼,虽然没有女朋友,但我相信现在的沉淀,迟早会得到回报的,开Tesla上班,每天和不同的美女睡觉等等,这些都是迟早的事。。。昨天晚上看了个视频,总结就一句话,人懂商业很重要!!!