HTML基础（二）CSS

时间：2018-12-06 14:16:05 阅读：243 评论：0 收藏：0 [点我收藏+]

标签：浮动垂直 strip important sheet 定位元素 link magent char

一、CSS选择器

1. id选择器

a.写在head里面的属性，需要用<style></style>标签包裹住，# 代表通过id选择器查找

例：<html lang="en">

<head>

<title>Title</title>

<style>

#i1{

height: 48px;

background-color: red;

}

</style>

</head>

b.写在body里面，直接在标签里面添加style属性，css style: 里面的写的就叫做css 每一个样式的间隔用；

例：<div id="i1" style="height: 48px;background-color: #6699CC"></div>

c.写在css文件中，在代码中通过引入css文件

css文件中写的格式与在head中写的格式一样

引入css文件，是在head中添加：<link rel="stylesheet" href="tmp.css">

2. class选择器

a.写在head里面的属性，需要用<style></style>标签包裹住，.（英文的点号）代表通过class选择器查找

例：<html lang="en">

<head>

<title>Title</title>

<style>

.c1{

height: 48px;

background-color: red;

}

</style>

</head>

b.写在body里面，直接在标签里面添加style属性，css style: 里面的写的就叫做css 每一个样式的间隔用；

例：<div class="c1" style="height: 48px;background-color: #6699CC"></div>

c.写在css文件中，在代码中通过引入css文件

css文件中写的格式与在head中写的格式一样

引入css文件，是在head中添加：<link rel="stylesheet" href="tmp.css">

3.标签选择器（方式与id和class的一样，这边就写一个简单的格式来举例，以下选择器同理）：标签名代表通过标签选择器查找

例：span{

color: red;

background-color: blue;

}

4.标签层级选择器：标签内的标签通过标签+空格+标签代表通过标签选择器查找

例：span标签下面所有div标签颜色改变

span div{

color: aqua;

background-color: red;

}

5.class层级选择器：通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层

例：.c1 div{

background-color: #336699;

height: 48px;

}

6.id层级选择器：通过ID标签选择器定位第一层，在通过层级选择器定位第二层

例：#i2 div{

background-color: black;

height: 48px;

}

7.id组合选择器：应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式组合通过逗号间隔

例：#z1,#z2,#z3{

background-color: chocolate;

height: 48px;

}

8.class组合选择器：应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式组合通过逗号间隔

例：.s1,.s2,.s3{

background-color: darkmagenta;

height:48px;

}

9.属性选择器：对选择到的标签在通过属性进行筛选可以和层级选择器连用

例：div[s=‘dsx‘]{

background-color: darkred;

height: 48px;

}

总结：

CSS可以写在三个地方，分别是1、标签中增加属性style，

2、header中添加标签style标签，在标签中添加CSS，

3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表<link rel="stylesheet" href="tmp.css">

二、CSS优先级

标签中style优先级最高，其次在代码中就近找，即：由内而外，由近及远

id、class、标签之间的优先级为：id>class>标签

如果要同时引用两个class的css的样式，可以在标签里直接写两个class的name c1 c2，中间用空格隔开

例：<body>

</body>

三、CSS属性

1.heigth：高 width：宽 border：边框像素（1px）实线（solid） dotted（虚线）颜色（red）

a.宽高的设定是像素

例：<div style="height: 48px;width: 48px;border: 1px solid red"></div>

b.宽高的设定是百分比，这边需要注意的是，高度不能设置百分比，因为有滚动条，设置百分比没有意义

例：<div style="height: 48px;width: 80%;border: 1px dotted red"></div>

c. 边框 border 上下左右边框都可单独配置

例：<div style="height: 48px;border-left: 1px dotted red"></div>

2.font-size:字体大小 px font-weight:字体加粗 bold

例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>

3.text-align 水平文本对齐方式 left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承

a.平行方向左右居中：text-align: center

例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">测试</div>

b.垂直方向居中 line-height：垂直方向要根据标签高度

例：<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">测试</div>

3.float:浮动 块级标签浮动后相当于分层都向左浮动块级标签会便在一行如果超过宽度超过100则会换行

通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承

例：<div style="width: 20%;float: left">1</div>

块及标签的占满100%是相对来说，相对与他外层的div

例：<div style="width: 400px;height: 400px;border: 1px solid black;">

4.display：展示属性 块级标签和行内标签之间切换的属性

块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签

行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性又有块级标签使用宽、高、内外边距的特性

a.display:inline 块级标签转换为行内标签

例：<div style="height: 100px;background-color: black;display: inline">外联标签</div>

b.display：block 内联标签转换为块及标签

例：<span style="height: 100px;background-color: red;display: block;">内联标签</span>

c.通过display:inline-block 可以完美的解决这个问题  他既有行内标签的自己多大就占多大的特性又有块级标签使用宽、高、内外边距的特性

例：<span style="background-color: blue;width: 100px;height: 100px;display: inline-block;">测试</span>

d.display：none 让标签消失，这个属性很重要，在UI自动化测试定位元素的时候很重要

例：<span style="background-color: #336699;display: none">我不显示的</span>

5.外边距 margin 内边距 padding

a.margin 外边距自己针对外围的div产生变化外边距撑大外层

例：<div style="border: 1px solid red;height: 100px">

</div>

b.padding 内边距自身的边距增加从上到下增加内边距扩大自身

例：<div style="border: 1px solid red;height: 100px">

<div style="height: 70px;padding: 10px">内边距增加</div>

</div>

HTML基础（二）CSS

标签：浮动垂直 strip important sheet 定位元素 link magent char

原文地址：https://www.cnblogs.com/nickey85/p/10075573.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行