Python之路53-css

Posted 2020-09-14

目录

一、HTML中如何使用CSS

二、CSS的选择器

三、CSS规则

四、CSS一些常用的样式

---

HTML中如何使用CSS

在HTML中有三种可以定义css的方法

1. 在标签中使用style属性

2. 写在head中

3. 将css样式写到文件中

<link rel="stylesheet" href="commons.css">

这里推荐写到css样式的文件中，可以最大程度的实现代码复用

---

CSS的选择器

1.id选择器，需要注意的是id不能重复，如

html中有个标签，id为i1

<标签 id="i1"></标签>

css中可以这么写

#i1{
    background-color: #2459a2;
    height: 48px;
}

2.class选择器，class可以重复，如

html中有个标签，class为c1

<标签 class="c1"></标签>

css中可以这么写

.c1{
    background-color: #2459a2;
    height: 10px;
}

3.标签选择器，可以将某个标签全部设置成此样式，如

css中可以这么写

div{
    background-color: #2459a2;
    height: 10px;
}

4.层级选择器，以空格分割，可以将某个标签里面的某个标签设置成此样式，如

css中可以这么写

span div{
    background-color: #2459a2;
    height: 10px;
}

5.组合选择器，以逗号分割，可以将某几个标签都设置成此样式，如

css中可以这么写

#i1,#i2,#i3{
    background-color: #2459a2;
    height: 10px;
}

6.属性选择器，某个标签的某个属性设置成此样式，如

css中可以这么写

input[type="text"]{
    background-color: #2459a2;
    height: 10px;
}

---

CSS规则

注释 /* ... */

优先级

标签中style优先级最高

css编写顺序（底下的优先级比上面高）

---

CSS一些常用的样式

边框，border

/* 宽度、样式、颜色 */
border: 4px dotted red;

背景，background

/* 背景色 */
background-color

/* 背景图片 */
background-image:url("img/4.gif")

/* 背景图片是否重复 */
background-repeat: no-repeat
background-repeat: repeat-x
background-repeat: repeat-y

/* 背景图片位置 */
background-position
background-position-x
background-position-y

漂移，float，可以使块级标签堆叠

/* 向左飘 */
float: left

/* 向右飘 */
float: right

注：

老子标签管不住儿子标签的时候要在老子div结束的上方再加一个div设置属性clear: both;

显示，dispaly

行内标签，无法设置高度、宽度、padding、margin

块级标签，可以设置高度、宽度、padding、margin

/* 让标签消失 */
display:none

/* 让标签有行内标签属性 */
display:inline

/* 让标签有块级标签属性 */
display:block

/* 让标签有行内和块级标签属性 */
display:inline-block

内边距和外边距，padding、margin

margin: 0 auto;上下距离为0，左右自适应

/* 内边距 */
padding

/* 外边距 */
margin

高度、宽度，height、width

height: 40px;
width:20%;

水平居中、垂直居中，text-align、line-height

text-align: center;
line-height

字体大小、字体颜色、字体加粗，font-size、color、font-weight

font-size:23;
color:red;
font-weight:30;

位置，position

/* 固定在页面的某个位置 */
position:fiexd;

/* 固定于父类标签的某个位置 */
<div style="position:relative;">
    <div style="postion:absolute;top:0;left:0"></div>
</div>

/* 透明度 */
opcity: 0.5

/* 层级顺序 谁大谁在上面 */
z-index:10

图片显示，overflow

/* 隐藏多出的部分 */
overflow:hidden;

/* 出现滑轮 */
overflow:auto;

当鼠标移动到标签时，css样式生效，hover

样式:hover{
    ....
    ....
}

本文出自 “八英里” 博客，请务必保留此出处http://5921271.blog.51cto.com/5911271/1919726