欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css基本内容

程序员文章站 2022-04-29 09:35:26
csscss是什么CSS是Cascading Style Sheets(级联样式表)级联:关联样式表:css修饰网页的语法集优点:将页面内容与表现形式分离 可达到重复利用css与html之间的关系html是网页的内容css控制外观 样式 样子css做什么为html控制外观css基本语法css三种样式表行级样式表行级样式表 直接将样式写在标签行内style=“属性名1:属性值;…”

床...

css

css是什么

CSS是Cascading Style Sheets(级联样式表)

级联:关联

样式表:css修饰网页的语法集

优点:将页面内容与表现形式分离 可达到重复利用

css与html之间的关系

html是网页的内容

css控制外观 样式 样子

css做什么

为html控制外观

css基本语法

css三种样式表

行级样式表

行级样式表 直接将样式写在标签行内

style=“属性名1:属性值;…”

<p style="color: aqua; font-size: 30px;">床前明月光</p>
		<p style="color: blue; font-size: 30px;">疑是地上霜</p>
		<p style="color: antiquewhite; font-size: 30px;">举头望明月</p>
		<p style=" color: aquamarine; font-size: 30px;">低头思故乡</p>
		 

内嵌样式表

<style type="text/css">
			p{
				color: red;
				font-size: 20px;
			} 		
</style>
<p class="p2" align="center">床前明月光,疑是地上霜.</p>
		 <p class="p3" align="center">举头望明月,低头思故乡.</p>

外部样式表

 <!-- <link rel="stylesheet" type="text/css" href="123.css" /> -->

选择器

选择器:将分离后的样式表与网页内容联系起来

标签选择器

通过标签选择器可以选择页面中所有指定标签

语法:标签名{}

<style>
p{
				color: red;
				font-size: 20px;
} 	
</style>
<body>
       <p>春眠不觉晓</p>
</body>

类选择器

类选择器:通过标签的class值选中一组标签

语法:.class属性值{}

         .p1{
				 color: #FF0000;
			 }
			 .p2{
				 color: aquamarine;
			 }
			 .p3{
				 font-size: 30px;
			 }
        <p class="p2">处处闻啼鸟.</p>
		<p class="p1">夜来风雨声,</p>
		<p class="p2">花落知多少.</p>

id选择器

#+id值

#title{
    属性名:属性值;
}
<p id="title">春眠不觉晓</p>

通配选择器

*{

属性名:属性值;

}

选择器的优先级

通配选择器<标签选择器<类选择器<id选择器

行级样式高于所有选择器

后代选择器

<html>
<head>
<style type="text/css">
h1 em {color:red;}
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>

子选择器

<html>
<head>
<style type="text/css">
h1>em {color:red;}
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<h1>This is a <em>important</em> paragraph.</h1>
</body>
</html>
/*第二个h1不受影响*/

相邻选择器

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

()+()

文本

font-size 字体大小

color 字体颜色

font-family字体

text-align文本对齐

text-decortion:underline:定义下划线

line-height:设置行高

font-weight:字体粗细

font-style:italic;斜体文本

text-indent:首行缩进

letter-spacing:字符间距

背景

background-color

background-image

background-repeat

background-size

background-position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.b1{
			width: 500px;
			height: 500px;
			background-color: #FF0000;
			background-image: url(img/nike.gif);
			background-repeat: no-repeat;
			background-position: bottom;
			background-size: 250px;
		}
	</style>
	<body>
		<p class="b1">1111111</p>
	</body>
</html>


标签分类

块级标签

无论有多少内容 都会独占一行

默认宽:与父级的标签一致

默认高:0 内容的高度

可以通过width heigth设置宽高


行级标签

只占自身大小,并不会占一行

设置宽高无效

行块级标签

可以设置宽高,不占一行

img input

列表

list-style-type:none;没有图标

list-style-position:inside;控制图标位置

list-style-image:url()插入图标图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.s1{
				/* list-style-type: none;
				list-style-position: inside;控制图标位置
				list-style-image:url(img/nike.gif); */
				list-style: url(img/nike.gif) inside none;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul class="s1">
			<li>第一项</li>
			<li>第二项</li>
			<li>第三项</li>
			<li>第四项</li>
			<li>第五项</li>
		</ul>
	</body>
</html>


伪类

class=“c”

c:link 表示未访问的链接

c:visited 表示已经请访问过的链接

c:hover 鼠标放在上的位置

c:active 鼠标点击的样式

透明度

opacity:0.5;

盒子

盒子模型是由margin(外边距)border(边框)padding(内边距)content(内容)

内容区

盒子放内容的区域

width height只是设置内容区的大小

如果没有设置内边距和边框的大小,内容区就是标签的大小

标签大小=内容区+内边距+边框

内边距

padding 就是内容区到边框的距离 会影响标签的大小

padding:10px 5px;上下 左右

padding:10px 10px 10px 10px;上 右 下 左

img{

display:block; 图像标签下面默认有一个间隔;

}

line-height=height;

text-align=center; 是文字水平垂直居中

border

有四个属性:颜色 边框样式 宽度 弧度

margin

外标签不会影响标签的大小,但会影响标签的位置

浮动

float:none|left|right

只能在水平位置上来改变元素块的显示方式

clear----清除浮动

定位

相对定位

position:relative

如果对一个元素进行相对定位.首先他将出现在其所在位置上,然后通过设置垂直或水平设置,让这个元素相对于它的原始起点进行移动.此外相对定位时,无论是否进行移动,元素仍然占据原来的空间,移动元素会覆盖其他框

绝对定位

positive:absolute

绝对定位时参照浏览器的左上角,配合left,bottom,right,top进行定位,如果没有上述四个值,则默认依据父级的坐标原点为起点.绝对定位可以使之在任何一个位置

两者区别

绝对定位和相对定位的区别在于:

绝对定位的坐标原点为上级元素的原点,与上级元素有关;

相对定位的坐标原点为本身偏移前的原点

本文地址:https://blog.csdn.net/weixin_48304611/article/details/109558627

相关标签: css