前端-CSS（一）

最新推荐文章于 2022-04-28 16:08:01 发布

a592381841

最新推荐文章于 2022-04-28 16:08:01 发布

阅读量3.7k

点赞数 15

分类专栏：前端

本文链接：https://blog.csdn.net/a592381841/article/details/85037004

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS

概念：层叠样式表（Cascading Style Sheets）

一、语法概述

选择器{属性：值;属性:值; }

CSS注释：

/*这是注释*/

例如

p{
color:red;
/* 这是注释*/
font-size:24px;}

二、语法--选择器

2-1:ID和Class选择器

首先必须在html标签中加上 id属性或者class属性
对于id选择器： id选择器以“#”开头
对于class选择器：class选择器以“.”开头

2-2:标签选择器

利用html标签名

例子如下：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
/*标签选择器*/
div{

float: left;
}
/*class选择器*/
.city {

margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
/*id选择器*/
#aaa {
	background-color: blue;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 



</style>
</head>

<body>

<h1>Demo</h1>
<br>

<div id="aaa">
<h2>Demo1</h2>
<p>Demo11111</p>
</div>

<div class="city">
<h2>Demo2</h2>
<p>Demo22222</p>
</div>

<div class="city">
<h2>Demo3</h2>
<p>Demo33333</p>
</div>

</body>
</html>

2-3:分组选择器

选择器1,选择器2,选择器3{

//css属性

}

h1{
color:red;
}
h2{
color:red;
}
h3{
color:red;
}


/*等价于如下*/
h1,h2h,h3{

color:red;
}

2-4：嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

2-5组合选择符

四种组合方式：

后代选择器（空格）
子元素选择器（>）
相邻元素选择器（+）
普通兄弟选择器（~）

div p{
	
	/*div下的所有p元素*/
}
div>p{
	
	/*div下的直接子元素*/
}

div+p{
	/*div的第一个兄弟元素p*/

}
div~p{
	/*div后面的所有p兄弟元素*/
}

2-5:属性选择器

[属性名]{.............}

[属性名=值]{............}

p[attribute1][attribute2]{         
/*  [] 属性选择器，表示具有某种属性的所有元素;
                   多个参数表示同时具有多个属性;*/
}
a[href="http://www.123.com"]{      
/*  =具有某个属性，且属性值等于指定值的所有元素 */
}
div[class~="class1"]{ 
 /*  ~=具有某个属性，且属性值包含指定值的所有元素  */
}
input[title^="title1"]{ 
/*  ^=指定属性的值以指定字符串开头   */
}
input[title$="title1"]{   
/*  $=指定属性的值以指定字符串结尾   */
}
input[title*="title1"]{   
 /*  *=指定属性的值包含指定字符串   */
}
input[title|="title1"]{ 
 /*  |=指定属性的值等于title1或者以title1-开头   */
}

三、多重样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

四、CSS中颜色的定义

十六进制： #ff0000
RGB RGB(255,10,10)
颜色名称： red

五、CSS链接样式

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

实例

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

</style>
</head>

<body>

<a href="http://www.baidu.com" target="_blank" >百度</a>
</body>
</html>

六、盒子模型

CSS box-model

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

对于margin和padding的设置都是

属性名{上右下左} 或者属性名{上下左右}

<!DOCTYPE html>
<html>
<head>
	<title>盒子模型</title>
</head>
<style type="text/css">
#dv{
	/*内容大小*/
	width: 100px;
	height: 100px;
	/*内边距大小*/
	/* padding 20px 15px 25 10  */
	padding-left: 10px;
	padding-right: 15px;
	padding-top: 20px;
	padding-bottom: 25px;
	/*边框大小*/
	/* border{3px solid red  }*/
	border-style: solid;
	border-color: red;
	border-width: 3px;
	/*外边距*/
	/*
		margin-top:15px;
		margin-bottom:15px;
		margin-right:20px;
		margin-left:20px;
	*/
	margin: 15px 20px;


}


</style>
<body>

<div id="dv">

dmemo111
</div>


</body>
</html>

七、隐藏元素。

Display:none; 隐藏元素，不影响布局

visibility：none; 隐藏元素。影响布局。

Display：inline；将元素改变为内联元素；只需要必须的宽度；不强制换行

Display: block;将元素改变为块元素；占据全部宽度，前后都有换行符

例如：

<!DOCTYPE html>
<html>
<head>
	<title>display 和visibility</title>
</head>
<style type="text/css">

div{
	border:3px solid red;
	width: 500px;
	height: 200px;
}
</style>
<body>
<div>
<h1 style="display:none;">显示1</h1>

<h1 style="color:red">display:不影响布局</h1>
</div>

<br/>
<div>
<h1 style="visibility:hidden">显示2</h1>

<h1 style="color:red">visibility：影响布局</h1>
</div>
<br/>
<div>
<h1 style="display:inline; background-color:green;"> 内联元素 display:inline</h1>
</div>

<br/>
<div >
<h1 style="display: block;background-color:green;">块元素 display:block</h1>


</div>

</body>
</html>

八、定位（Position）

postion属性制定了元素的定位类型。

position属性的五个值： static（静态）， relative（相对），fixed（固定），absolute（绝对），sticky（粘性）

8-1 ：static定位（静态）

使用position:static;定位的元素，无特殊定位，遵循正常的文档流对象。【默认状态】

8-2：fixed定位

元素相对于浏览器窗口的固定位置。（不遵循正常文档流）【以自己为参照物】

8-3：relative定位

相对定位元素的定位（原始位置遵循正常文档流，移动后位置不遵循正常标准流）【以自己为参照物】

8-4：absolute定位

absolute是相对定位；相对于最近的已经定位的父元素；若无满足此要求的父元素，则以<html>作为参照物(不遵循正常文档流)

8-5：sticky定位

基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

<!DOCTYPE html>
<html>
<head>
	<title>定位</title>
</head>
<style type="text/css">
#staticd{
border: 3px solid red;
position: static;

}

#fixedd{
border: 3px solid red;
position: fixed;
width: 500px;
height: 400px;
/*窗口上边框在该元素上方50px*/
top: 50px;
/*窗口由边框边框在该元素右方50px*/
right: 50px;
}

#relatived{
 border:3px solid red;
 position:relative;
 width: 100px;
 height: 100px;
 /*原始位置，在当前元素向右边100px*/
 left:750px;
 /*原始位置在当前位置的上方100px*/
 top:100px;

}
#absoluted{
border :3px solid green;
position:absolute;
/*父元素上边框在本元素向上10*/
top: 10px;
/*父元素左边框在本元素的左边10*/
left:-10px;

}
</style>
<body>
<div>
<p id="staticd">static定位</p>

</div>

<div>
<p id="fixedd">fixed定位</p>
</div>
<div>
<p id="relatived">relative定位</p>
</div>
<div style="width:500px;height:500px;background-color:red;position:relative; top:120px;">
<p id="absoluted">absolute定位</p>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
/*Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。*/
<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>

</body>
</html>

a592381841

关注

15
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
前端-CSS（一）

CSS 概念：层叠样式表（Cascading Style Sheets）一、语法概述选择器{属性：值;属性:值; }CSS注释： /*这是注释*/例如p{color:red;/* 这是注释*/font-size:24px;}二、语法--选择器2-1:ID和Class选择器首先必须在html标签中加上 id属性或者class属性...
复制链接

扫一扫