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框架做；过段时间做一个网站来推广VPN服务，虽然有些怕，但是为了生存，还是拼一拼；

日记：

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

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/Sufeiboy/article/details/83175717
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-27 23:53:49
阅读 ( 510 )
分类：前端

Web前端技术（1）

CSS选择器知识

CSS样式优先级

CSS边框以及常用样式

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看