28 May 18 CSS属性

发布时间：2023-09-06 01:56责任编辑：傅花花关键词：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 >div前面的c1</p>

<p >div后面的c1</p>

<p >div后面的c2</p>

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

}

如果设置成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-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 >上海这地方比得上希腊神话里的魔女岛，好好一个人来了就会变成畜生。--《围城》</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: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 >

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

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

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

</div>

<div

28 May 18 CSS属性

知识推荐