28 May 18 CSS属性

28 May 18

一、今日面试题

# 去重并保持原来的顺序

# 方法一

l1 = [11, 2, 3, 22, 2, 4, 11, 3]

l2 = []

for i in l1:

if i not in l2:

l2.append(i)

print(l2)

print("=" * 120)

# 方法二

l3 = list(set(l1)) # 将列表用set去重，再转换回列表（没有按照之前的顺序）

l3.sort(key=l1.index) # 将上一步得到的列表排序，按照l1中的顺序排序

print(l3)

# sort的扩展（使用lambda表达式）

l4 = [

{"name": "Alex", "age": 38},

{"name": "Egon", "age": 18},

{"name": "Nezha", "age": 19},

{"name": "Yuan", "age": 29},

{"name": "WuSir", "age": 30},

]

l4.sort(key=lambda x: x["age"])

print(l4)

二、CSS选择器复习及实例

1. CSS是什么：层叠样式表 --> 给HTML添加样式的

2. CSS的语法

选择器{

属性1：值1;

属性2：值2;

}

3. CSS引入方式

1. 直接写在HTMl标签里面

2. 写在style标签里面的

3. 写在单独的css文件中

4. CSS选择器

1. 基本选择器

1. ID选择器 --> #d1 {}

2. 类选择器 --> .c1 {}

3. 标签选择器--> a {}

4. 通用选择器--> * {}

2. 层级选择器

后代选择器 --> div .c1 {}

儿子选择器 --> div>.c1 {}

毗邻选择器 --> div+.c1 {} 同一级紧挨着我的那个标签

弟弟选择器 --> div~.c1 {} 同一级后面所有的

3. 属性选择器

有某个属性值的 --> div["title"]

属性等于某个值的--> input["type"="button"]

4. 交集、并集选择器

交集：p.c1

并集：p,.c1

5. 伪类选择器

a:hover {

}

input:focus {

}

6. 伪元素选择器

p:before {}

p:after {}

p:first-child

p:last-child

5. CSS选择器的优先级

1. CSS选择器相同时：距离标签越近，权重越高！

2. CSS选择器不同时：

内联> ID选择器> 类选择器> 元素选择器> 继承的样式

3. !important 火烧眉毛才用！

6. 三大特性

1. 继承

2. 层叠

3. 优先级

<!DOCTYPE html>

<head>

<title>CSS选择器练习</title>

<style>

/*#d1~.c1 {*/

/*color: red;*/

/*}*/

/*.c3~.c1 {*/

/*color: deeppink;*/

/*}*/

div~.c1 {

color: green;

}

div+.c1 {

color: blue;

}

p:before {

content: "*";

color: red;

}

p:after {

content: "?";

color: blue;

}

</style>

</head>

<body>

<p class="c1">div前面的c1</p>

<p class="c1">div后面的c1</p>

<p class="c2">div后面的c2</p>

<p class="c1">div后面的c1</p>

<p>aaaaa</p>

</div>

</body>

</html>

快捷操作

ul>li*3>a[s=$]{table a}+span

<ul>

<li><a href="" s="1">table a</a><span></span></li>

<li><a href="" s="2">table a</a><span></span></li>

<li><a href="" s="3">table a</a><span></span></li>

</ul>

三、HTML标签的分类

1. 块级标签（block；自占一行；只有块级标签可以识别宽和高）

1. div

2. p

3. h1~h6

4. hr

5. ul>li

6. table>tr

2. 行内标签（inline；行内标签不能识别宽和高；长度由内容决定！）

1. a

2. span

3. i, u, s ...

4. input

5. img

3. display: inline-block;

不独占一行，且可识别width和height

Blog链接：https://www.cnblogs.com/liwenzhou/p/7999532.html

四、CSS属性—字体属性

1、宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

2、文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

body {

font-family:"Microsoft Yahei","微软雅黑", "Arial", sans-serif

}

3、字体大小

p {

font-size:14px;

}

如果设置成inherit表示继承父元素的字体大小值。

4、字重

font-weight用来设置字体的字重（粗细）。

5、文本颜色

十六进制值- 如: ＃FF0000

一个RGB值- 如: RGB(255,0,0)

颜色的名称- 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

/*四种选取颜色的方式*/

/*color: red;*/

/*color: #0000FF;*/

/*color: #00F;*/ #简写

/*color: rgb(74,83,149);*/

五、CSS属性—文字属性

1、文字对齐

text-align属性规定元素中的文本的水平对齐方式。

left, right, center, justify

2、文字装饰

text-decoration属性用来给文字添加特殊效果。

3、首行缩进

p {

text-indent:32px;

}

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

/*a 不能识别width & height，p可以识别width & height*/

#a2,#p2 {

width:200px;

height:200px;

color:red;

}

/*font-family如果不设置，用系统默认的*/

body {

font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif

}

#p2 {

font-size:24px;

font-weight:bold;

/*四种选取颜色的方式*/

/*color: red;*/

/*color: #0000FF;*/

/*color: #00F;*/

/*color: rgb(74,83,149);*/

color: rgba(0,0,0,0.6);

text-align:center;

text-decoration:underline;

text-indent:48px;

}

/*取消a超链接自带的下划线效果*/

a {

text-decoration: none;

}

/*设置超链接鼠标经过时样式*/

a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

<p id="p2">上海这地方比得上希腊神话里的魔女岛，好好一个人来了就会变成畜生。--《围城》</p>

</body>

</html>

六、CSS属性—背景属性

/*背景颜色*/

background-color:red;

/*背景图片*/

background-image:url('1.jpg');

背景重复

repeat(默认):背景图片平铺排满整个网页

repeat-x：背景图片只在水平方向上平铺

repeat-y：背景图片只在垂直方向上平铺

no-repeat：背景图片不平铺

background-repeat:no-repeat;

/*背景位置*/

background-position:right top;

/*background-position: 200px 200px;*/

支持简写：

background:#ffffff url('1.png') no-repeat right top;

<!DOCTYPE html>

<head>

<title>背景相关实例</title>

<style>

#d1 {

/*画圆*/

height: 300px;

width: 300px;

background-color: red;

border-radius: 150px;

/*设置边框*/

/*border-width:5px;*/

/*border-color:green;*/

/*border-style:solid;*/

border: 5px solid green;

border-left:5px solid blue;

border-right:10px dotted yellow;

}

#d2 {

height: 600px;

width: 600px;

/*background-image:url("hlw.png");*/

/*background-repeat:no-repeat;*/

/*background-position:bottom center;*/

background: url("hlw.png") no-repeat center;

}

/*设置a1不在页面显示，一般与hover连用，但鼠标游移时出现*/

#a1 {

display: none;

}

/*将div又块级标签转成行内标签*/

#d3 {

display: inline;

}

#d5 {

height: 200px;

width: 400px;

padding:50px;

/*margin:20px;*/

/*margin-left:20px;*/

/*margin-right:30px;*/

/*margin-top:40px;*/

/*margin-bottom:50px;*/

/*上右下左（顺时针）*/

margin: 40px 30px 50px 20px;

/*上下、左右*/

/*margin: 40px 30px;*/

/*上、左右、下*/

/*margin: 40px 50px 30px;*/

border: 10px solid black;

}

#d6 {

width: 50px;

height: 50px;

background-color: chartreuse;

margin: 0 auto;

}

</style>

</head>

<body>

</div>

</body>

</html>

七、CSS属性—背景图片固定不动

<!DOCTYPE html>

<head>

<title>滚动背景图示例</title>

<style>

* {

margin: 0;

}

.box {

width: 100%;

height: 500px;

background:url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;

background-attachment: fixed;

}

.d1 {

height: 500px;

background-color: tomato;

}

.d2 {

height: 500px;

background-color: steelblue;

}

.d3 {

height: 500px;

background-color: mediumorchid;

}

</style>

</head>

<body>

</body>

</html>

八、CSS属性—边框属性

#i1 {

border-width:2px;

border-style:solid; (dashed, dotted,none)

border-color:red;

border-top-style:dotted;

border-top-color:red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

}

简写

#i1 {

border: 2px solid red;

}

九、CSS盒子模型

内容-->内填充-->边框-->外边距

想要调整内容和边框之间的距离用：padding

想要调整不同标签之间的距离用：margin

十、浮动实例

在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

left：向左浮动

right：向右浮动

none：默认值，不浮动

<!DOCTYPE html>

<head>

<style>

body {

margin: 0;

}

.left {

width: 20%;

height: 1000px;

background-color: red;

float: left;

}

.right {

width: 80%;

height: 1000px;

background-color: green;

float: right;

}

</style>

</head>

<body>

</body>

</html>

clear属性规定元素的哪一侧不允许其他浮动元素。

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

inherit 规定应该从父元素继承clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

父标签塌陷问题

.clearfix:after {

content: "";

display: block;

clear: both;

}

十一、浮动的弊端(父标签塌陷问题)

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

body {

margin: 0;

}

#d1 {

border: 1px solid black;

}

div.c1,

div.c11,

div.c111{

height: 200px;

width: 200px;

background-color: green;

border: 1px solid red;

float: left;

}

div.c11 {

height: 150px;

}

div.c111 {

height: 250px;

}

/*解决父标签塌陷问题，方式三*/

/*.c2 {*/

/*height: 100px;*/

/*width: 100px;*/

/*background-color: blue;*/

/*clear: left;*/

/*}*/

/*解决父标签塌陷问题，方式一*/

.clearfix:after {

content: "";

clear: both;

display: block;

}

</style>

</head>

<body>

</div>

</body>

十二、CSS属性—Overflow溢出属性与溢出实例

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承overflow 属性的值。

overflow（水平和垂直均设置）

overflow-x（设置水平方向）

overflow-y（设置垂直方向）

<!DOCTYPE html>

<head>

<style>

.c1 {

height: 50px;

width: 50px;

border: 1px solid black;

overflow: scroll;

}

.c2 {

height: 200px;

width: 200px;

border-radius: 100px;

border: 5px solid white;

overflow: hidden;

}

.c2>img {

max-width: 100%;

}

</style>

</head>

<body>

在苍茫的大海上，狂风卷集着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔！

</div>

</div>

</body>

</html>

十三、CSS属性—定位

1. 相对定位 --> 相对自己原来在的位置

2. 绝对定位 --> 相对已经定位过的父标签

3. 固定定位 --> 相对于浏览器窗口

脱离文档流（位置会被别的标签抢去）

1. 浮动的元素

2. 绝对定位

3. 固定定位

没有脱离文档流

相对定位

<!DOCTYPE html>

<head>

<style>

body {

margin: 0;

}

.c1 {

height: 100px;

width: 100px;

background-color: red;

}

.c2 {

height: 100px;

width: 100px;

background-color: green;

position: relative;

left: 100px;

}

/*C4绝对定位钱，其父标签c3必须先定位*/

.c3 {

height: 100px;

width: 60px;

background-color: blue;

position: relative;

}

.c4 {

height: 50px;

width: 100px;

background-color: orangered;

position: absolute;

top: 100px;

left: 60px;

}

/*返回顶部按钮样式示例*/

.c5 {

height: 40px;

width: 100px;

background-color: grey;

color: red;

position: fixed;

right: 10px;

bottom: 20px;

}

</style>

</head>

<body>

</div>

</body>

</html>

十四、blog实例

# blog.html

<!DOCTYPE html>

<head>

</head>

<body>

</a>

<div class="info"> coming soon </div>

</div>

<a href="">about me</a>

<a href="">weibo</a>

<a href="">public account</a>

</div>

<a href="">#JavaScript</a>

<a href="">#Python</a>

<a href="">#Golang</a>

</div>

<a href="" class="article-title">legend of 1900</a>

</div>

I could stay here for years, but the sea never speak to me. If i get off, live on land for a couple of years, I'd be normal, just like all the others.

</div>

</div>

<a href="" class="article-title">legend of 1900</a>

</div>

I could stay here for years, but the sea never speak to me. If i get off, live on land for a couple of years, I'd be normal, just like all the others.

</div>

</div>

<a href="" class="article-title">legend of 1900</a>

</div>

I could stay here for years, but the sea never speak to me. If i get off, live on land for a couple of years, I'd be normal, just like all the others.

</div>

</div>

<a href="" class="article-title">legend of 1900</a>

</div>

I could stay here for years, but the sea never speak to me. If i get off, live on land for a couple of years, I'd be normal, just like all the others.

</div>

</div>

</div>

</body>

</html>

# blog.css

/*设置页面margin*/

margin:0;

}

/*设置背景颜色和行间距*/

body{

background-color:#eee;

line-height:1.2;

}

/*超链接去掉下划线，链接颜色和主体一致*/

a{text-decoration: none;

color:inherit;

}

/* 左侧边栏样式开始*/

/*.side-bar {*/

/*width: 20%;*/

/*position: fixed;*/

/*height: 100%;*/

/*float: left;*/

/*color: #eee;*/

/*background-color: #4d4d4d;*/

/*}*/

.side-bar {

width: 20%;

position: fixed;

height: 100%;

float: left;

color: #eee;

background-color: #4d4d4d;

}

/*.side-bar>* {*/

/*padding: 20px 15px;*/

/*}*/

.side-bar>* {

padding: 20px 15px;

}

/*.header>* {*/

/*margin: 10px 0;*/

/*}*/

.header>* {

margin: 10px 0;

}

/*.header .logo {*/

/*display: block;*/

/*border: 5px solid #fff;*/

/*margin: 0 auto;*/

/*position: relative;*/

/*overflow: hidden;*/

/*width: 128px;*/

/*height: 128px;*/

/*border-radius: 50%;*/

/*}*/

.header .logo {

display: block;

border: 5px solid #fff;

margin: 0 auto;

position: relative;

overflow: hidden;

width: 128px;

height: 128px;

border-radius: 50%;

}

/*.header .author-name {*/

/*text-align: center*/

/*}*/

.header .author-name {

text-align: center;

}

/*.logo>img {*/

/*max-width: 100%;*/

/*}*/

.logo>img {

max-width: 100%;

}

/*.side-bar .nav a,*/

/*.side-bar .tag-list a {*/

/*display: block;*/

/*padding: 5px;*/

/*color: #888;*/

/*transition: color 200ms;*/

/*}*/

.side-bar .nav a,

.side-bar .tag-list a {

display: block;

padding: 5px;

color: #888;

transition: color 200ms;

}

/*.side-bar .nav a:hover,*/

/*.side-bar .tag-list a:hover {*/

/*color: #eee*/

/*}*/

.side-bar .nav a:hover,

.side-bar .tag-list a:hover{

color: #444;

}

/*.side-bar .nav a {*/

/*font-weight: bold;*/

/*}*/

.side-bar .nav a {

font-weight: bold;

}

/* 左侧边栏样式结束*/

/* 右侧内容区*/

.main {

width: 80%;

float: right;

color: black;

}

.main .article {

background-color: white;

padding: 15px;

margin-bottom: 20px;

box-shadow: 3px 3px 3px rgba(0,0,0,0.2);

}

.article-header {

padding-bottom: 15px;

}

.article-title {

font-size: 24px;

font-weight: bold;

}

.article-date {

float: right;

}

.article-tag {

margin-top: 20px;

border-top: 1px solid #eee;

padding: 15px 0;

}

猜你喜欢