css(基本知识点个人总结)

最新推荐文章于 2022-06-30 17:52:01 发布

阿贾兴兴

最新推荐文章于 2022-06-30 17:52:01 发布

阅读量756

点赞数 3

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_41983253/article/details/94036145

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Css基本介绍

美化样式

Css样式分类

行内样式：<标签名style=“属性名:属性值;”></标签名>

内部样式：<style></style>

注意：<style><>/style>写在<head></head>里面。

外部样式：

外部样式(企业中推荐应用)：

1.在css文件夹下新建一个css文件（放样式）

2.在head里面引用样式<link rel=“stylesheet” type=“text/css” href=“css文件地址”/>

Css样式的优先级

行内样式>内部样式>外部样式

Css选择器:用在内部样式或外部样式

标签选择器：

标签名（元素）{

css样式

}

类选择器：

1.给元素（标签）起一个类名

2.通过类选择器实现样式设置

.className{

css样式

}

在body里面用class=

id选择器：

id名：唯一

#id名{

css样式

}

通配符选择器：

通配符：匹配页面中所有的标签，设置样式

5、群组选择器：

单一选择器,单一选择器{

css样式

}

//注意：这里的单一选择器就是上面所提到的四种选择器

6、后代选择器：

包含关系

祖先元素后代元素{

css样式

}

7、子代选择器：

父子关系

父元素 >子元素{

css样式

}

Css选择器的优先级

Css高级

盒子模型：

盒子模型的概述：

html中所有的元素（标签）都是一个盒子

盒子模型的四要素：

内容：宽度和高度

内边距（padding）：边框与内容之间的间隙

边框：border

外边距（margin）：边框与其他元素边框之间的间隙

HTML元素的分类：

1.块状元素（display: block;）

独占一行的元素，排列方式：垂直

p h1-h6 table form div

如果不设置宽度，则与其父容器同宽

如果不设置高度，高度由内容(普通文档流)决定

设置宽高有效

2.行内元素（内联元素）(display: inline;)

不独占一行的元素，排列方式：横向

a font 文本格式化标签（em strong u） label span

如果不设置宽度和高度，宽高由内容决定

设置宽高无效

3.行内块元素(display: inline-block;)

不独占一行的元素，排列方式：横向

img input

如果不设置宽度和高度，宽高由内容决定

设置宽高有效

注意：元素属性display为该内容的显示方式，其中块状元素默认为block，行内元素默认为inline,行内块元素默认为block-inline。block和inline-block可以修改块内的宽和高，inline不可以，但可以将inline改为block 或inline-block来修改。

2、浮动

1、Css浮动的原理：

无语义标签

div--网页制作实现画块

span--方便局部设置样式

2、清除浮动：

CSS 中清除浮动的属性clear: both，clear 有 both/left/right/none/inherit 几个属性值，分别代表在元素左右两侧不允许出现浮动元素/左侧不允许出现浮动元素/右侧不允许出现浮动元素/不清除浮动/继承父元素的值。

设置了 clear: both 的元素不会跟浮动元素同行，并且会占据新的一整行，而不是根据内容来自动调整宽度。之所以会这样，要从 clear 的原理说起，clear 会为元素添加足够的空白空间，使到该元素的位置会放置在它前一个浮动元素之下，这跟增加元素外边距使到元素占据满行而强制换行的效果是一样的

3、浮动的案例分析：

列表标签：

无序列表：列表项之间是并列关系

ul:定义一个无序列表

li:定义一个列表项

type="设置列表样式

制作导航条：

代码如下：

<!DOCTYPE html>

<html>

<head>

<style>

/*去掉浏览器的默认样式*/

margin: 0;

padding: 0;

}

.nav{

height: 75px;

background-color: #12A480;

}

.nav ul{

width: 1400px;

height: 75px;

/*实现盒子居中*/

margin: auto;

}

.nav ul li{

/*去掉列表的样式*/

list-style: none;

float: left;

width: 140px;

}

.nav ul li a{

/*将a标签设置为块状元素*/

display: block;

width: 140px;

height: 75px;

/*实现文本左右居中*/

text-align: center;

/*实现文本垂直居中*/

line-height: 75px;

/*去掉下划线*/

text-decoration: none;

color: #ffffff;

font-size: 22px;

}

/*实现鼠标悬停*/

.nav ul li a:hover{

background-color: #077257;

}

</style>

</head>

<body>

<ul>

<li><a href="#">实训online</a></li>

<li><a href="#">职业性格测评</a></li>

</ul>

</div>

</body>

</html>

效果图：

3、定位

1、三种定位方式：

定位：所有的html元素都可以采用定位

相对定位（relative）：相对自身原先的位置（左上角）发生偏移，原先的位置保留

绝对定位(absolute):绝对定位的元素是不占据原先的位置，一旦设置偏移量后，是相对于设置了相对定位的祖先元素或body发生偏移

固定定位(fixed):绝对定位的元素是不占据原先的位置，一旦设置偏移量后，是相对于body发生偏移,该元素是不随滚动条滚动的

三种定位方式https://www.cnblogs.com/iceflorence/p/5798553.html

例如代码如下：

html>

<head>

<style>

body{

margin: 0;

}

.father{

width: 400px;

border: 1px solid #000;

/*设置盒子居中*/

margin: auto;

}

.son1{

width: 100px;

height: 100px;

background-color: #f00;

}

.son2{

width: 100px;

height: 100px;

background-color: #0f0;

/*相对定位*/

/*position: relative;

top: 100px;

left: 100px;*/

/*绝对定位*/

/*position: absolute;*/

/*top: 100px;

left: 100px;*/

/*right: 0;

bottom: 0;*/

position: fixed;

top:0;

right: 0;

}

.son3{

width: 100px;

height: 100px;

background-color: #00f;

}

</style>

</head>

<body>

</div>

</body>

</html>

3、相对定位和绝对定位配合使用：

div 与 span 的区别：http://www.divcss5.com/rumen/r79.shtml

举例说明：

<!DOCTYPE html>

<html>

<head>

<title>相对定位和绝对定位的配合比使用</title>

<style>

body,div,ul,li,img,a{

margin:0;

padding:0;

}

li{

list-style: none;

}

.div-skin {

width: 400px;

}

.div-skin li{

float: left;

position: relative;

}

.div-skin li:hover .mask{

display: block;

}

color: goldenrod;

}

.mask{

width: 195px;

height: 70px;

display: inline-block;

background-color: rgba(0,0,0,0.5);

display: none;

position: absolute;

top: 0;

left: 0;

/*实现文字水平居中*/

text-align: center;

line-height: 70px;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

没有图片展示不全。

搭架子：

头部和main代码如下：

<!DOCTYPE html>

<html>

<head>

<title>聚美注册页面</title>

<!--网页布局

1.技巧：从大到小从上到下从左到右

2.步骤

先将浏览器的默认样式重置

1）搭架子（先写html结构，再写样式）

2）实现细节

-->

<style>

.contain{

width: 1000px;

border: 1px solid #000;

/*实现盒子居中*/

margin: auto;

}

/*头部*/

.top-box{

width: 400px;

float: right;

margin-top: 25px;

}

.top-link{

display: inline-block;

width: 110px;

height: 32px;

background-image: url(img/header_corn_new_v2.png);

margin-left: 20px;

}

.flash{

/*背景图片定位：x轴的偏移量 y轴的偏移量*/

background-position: 0 -32px;

}

.shopping{

background-position: 0 -64px;

}

/*主体*/

.main{

height: 450px;

border: 1px solid #0f0;

}

.register-div{

width: 300px;

float: right;

padding: 20px;

/*设置盒子阴影：x轴偏移量 y轴偏移量模糊距离阴影颜色*/

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

}

.register-div h1{

font-weight: normal;

font-size: 24px;

float: left;

margin-bottom: 20px;

color: #F8296D;

}

.register-div a{

color: #F8296D;

}

.register-div span{

padding-top: 10px;

float: right;

}

.register-div li{

margin-top: 20px;

}

.txt{

width: 290px;

height: 38px;

border: 1px solid #ccc;

font-size: 16px;

padding-left: 5px;

}

.btn{

width: 295px;

height: 38px;

border: 1px solid #F8296D;

font-size: 16px;

color: #fff;

background-color: #F8296D;

}

.code-txt{

width: 150px;

padding-left: 5px;

margin-right: 15px;

}

.code-btn{

width: 120px;

}

.footer{

height: 90px;

border: 1px solid #00f;

}

</style>

</head>

<body>

</div>

<ul>

<li>

</li>

<li><a href="#">《聚美优品用户协议》</a></li>

</ul>

</form>

</div>

</div>

</body>

</html>

阿贾兴兴

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
css(基本知识点个人总结)

Css基本介绍美化样式Css样式分类行内样式：<标签名style=“属性名:属性值;”></标签名>内部样式：<style></style>注意：<style><>/style>写在<head></head>里面。外部样式：外部样式(企业中推荐应用)：...
复制链接

扫一扫