A css样式表

abc0x

已于 2022-02-17 11:39:20 修改

阅读量736

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-01-14 09:08:23 首次发布

本文链接：https://blog.csdn.net/weixin_44145887/article/details/122476966

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.定义：

css用来定义如何显示HTML元素（长宽高、颜色、间距、背景等展示效果）
一般把css引入放在head标签里面，把js放在页面尾部

<head>
<link rel="stylesheet" media="all" href="layui/css/layui.css" />
</head>

2.基础语法

p{//选择器
color: red;//属性：值
font-size: 14px;//属性：值
}

选择器：声明哪个元素采用这个样式表。可以是标签、class、id和属性

3.选择器分类
3.1 上下文选择器（派生选择器）
3.2 类选择器

多个标签可以共用一个class值。一个标签的class属性可以有多个值。
使用class属性作为选择器，需要在选择器名字前面加 .
class内有多个选择器时，谁在后面用哪一个

.c1{
font-size:20px;
color:maroon; 
}
.c2{....}
<p class="c1"></p>
<a class="c1 c2" href="#"></a>

3.3 ID选择器

每一个标签的id属性值必须是唯一的
使用id选择器，需要在选择器名字前面加#号

#i1{
font-size:30px;
font-weight:10px;
color:black;
}
<p id="i1"></p>

3.4属性选择器

主要应用在表单元素中

input[type=text]{
color:red;
}
<input type="text" value="文本框"/>
<input type="password" value="密码">

4.引入样式
4.1 内联样式

在标签内部，直接在标签里加style进行设置

<p style="padding:10px">内联样式</p>

4.2 内部样式表

写在标签里面

<head>
<style>
body{
background-color:red;
}
</style>
</head>

4.3外部样式表

写在标签里面
先写一个css文件
用link标签引入css文件

css文件内
body{
	background-color:darkgoldenrod;
}
html文件内
<head>
<link rel="stylesheet" type="text/css" href="css文件路径>
</head>

4.4样式加载优先级

当一个html中出现多个样式时，样式的优先级如下：
内联样式>内部样式表=外部样式表
其实就是就近原则，离越近优先级越高

5.盒子
盒子的组成
5.1 外边距margin、内边距padding

margin控制外边距的属性
margin依照顺时针：上、右、下、左。例如 margin : 10px 20px 30px 40px。
如果上下、左右相同可简写 margin: 10px 20px。表示距离上下边距10px，左右边距20px
auto表示自动适应。比如 margin: 10px auto。表示距离上下边距10px，左右自动适应
margin-top、margin-left、margin-right、margin-bottom

5.2 边框：border

border设置整个边框的属性，boder 1px solid #ffo；

border：设置粗细
solid：实线
dashed：虚线

border-width	设置边框宽度（粗细）	    border-width: 1px;
border-color	设置边框颜色	
border-style	边框样式（虚线、实线）	border-style: dashed/solid
border-top    	设置上边框样式	            border-top: 1px solid #FFO;
border-top-width	设置上边框宽度	
border-top-color	设置上边框颜色	
border-top-style	设置上边框样式

5.3 文本样式

font	    设置所有的字体属性	
font-family	设置字体	
font-size	设置字体大小	
font-style	设置字体样式	normal正常的字体(默认字体样式，可用于去掉html i斜体标签默认斜体样式)
             italic斜体。 对于没有斜体变量的特殊字体，将应用oblique
             oblique     倾斜的字体
font-weight	设置字体粗细	font-weight: normal/bold/300;

示例：

.title{
font:italic bold 12px Georgia,serif;
}

6 页面背景设置

background-attachment	背景图像是否固定或随页面的其余部分滚动	background-attachment:fixed;
background-color	    背景色	background-color:#FF0;
background-size	       背景图尺寸	background-size: 100%;
background-image	   设置背景图	background-image:url(../img/bg.jpg);
background-position	   设置背景图的起始位置	空格分隔X轴和Y轴坐标
                        background-position:   top center;
                        background-position:-24px 210px;
backgrount-repeat	设置背景图像是否重复	background-repeat: no-repeat;

css定位
7.1 position属性

值	描述
fixed
固定定位	参照物：浏览器
        脱离DOM流，不占据空间
        常用作漂浮广告，返回顶部等特效样式
        这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置； 
relative
相对定位	参照物：自身
        存在DOM流中，占据原先的空间
        该定位可以通过设置top/bottom/left/right等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流
static
静态定位	HTML元素的默认值，没有定位，元素出现在正常的流中；
        也就是按照文档的书写布局自动分配在一个合适的地方；
        这种定位方式用margin来改变位置，对top/bottom/left/right/z-index等设置值无效，这种定位不脱离文档流； 
absolute
绝对定位	参照物：最近的已定位（fixed/relative/absolute）祖先元素
         如果没有已定位的祖先元素，那么他的位置相对于<html>或<body>
         脱离DOM流，不占据空间
         这种定位通过top/right/bottom/left等属性设置偏移值

示例：

<style type="text/css">
h2{
position: absolute;
left:100px;
top:150px
}
</style>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

7.2 overflow属性：规定当内容溢出元素框时发生的事情

visible	 默认值，内容不会被修剪，会呈现在元素框之外	
hidden	 内容会被修剪，并且其余内容是不可见的	                overflow: hidden;
scroll	 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容	overflow: scroll;
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容	
inherit	继承父类元素的overflow属性值

示例：

<style type="text/css">
div {
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
<body>
<p>
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

7.3 z-index属性

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面或后面）
值越大，越靠前
没有指定z-index，后面的元素压住前面的元素

值	     描述	                            示例
number	根据数字确定堆叠顺序，值越大，越靠前	z-index: 999;
auto		                                overflow: auto;
inherit	继承父元素的z-index属性值	            overflow: inherit;

7.4 visibility属性

值	         描述
visible  	 默认值，元素是可见的
hidden	    元素不可见，但是原有的位置还存在
collapse	在表格元素中使用，此值可以删除一行或一列，但是不会影响表格布局；
            被行和列占据的空间会留给其他内容使用；
            此值在其他元素中使用，等效于hidden；
inherit	    继承父元素的visibility属性的值

8.Css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。
如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间
1.设置元素A浮动，元素A相当于往上移动一个图层。
2.设置元素浮动：元素会具有内联元素的特性，即跟其他相邻的浮动元素在同一行**

属性	描述	值
clear	指定不允许元素的哪一侧有浮动元素	left
                                        right
                                        both 两边
                                        none
                                        inherit
float	指定一个盒子（元素）是否浮动	    left
                                        right
                                        none
                                       inherit 继承父元素

示例：

<html>
	<head>
		<style>
			div{
				border: 0px solid #000000;
				width: 100px;
				height: 100px;
				margin: 5px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div style="float: left; background-color: black;">1</div>
		<div style="float: left; background-color: red;">2</div>
		<div style="float: left; background-color: blue;">3</div>
	</body>
</html>

abc0x

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
A css样式表

1.定义：css用来定义如何显示HTML元素（长宽高、颜色、间距、背景等展示效果）2.基础语法p{//选择器color: red;//属性：值font-size: 14px;//属性：值}选择器：声明哪个元素采用这个样式表。可以是标签、class、id和属性3.选择器分类3.1 上下文选择器（派生选择器）3.2 类选择器多个标签可以共用一个class值。一个标签的class属性可以有多个值。使用class属性作为选择器，需要在选择器名字前面加 .class内有多个选择器
复制链接

扫一扫