CSS样式

最新推荐文章于 2024-05-21 21:14:20 发布

沐子**

最新推荐文章于 2024-05-21 21:14:20 发布

阅读量323

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43737870/article/details/112863392

版权

CSS样式添加方法

1.css添加方法------行内，css样式被添加到p标签

<p style="color:red;">

2.css添加方法-------内嵌样式，header标签之内，只对当前页面的所有p标签有效

<style  type="text/css">
   p{
     color:red;
   }
 </style>

3.css添加方法-------单独文件
submit扩展：link+css

p{color:red;}   //style.css外部式样式表文件

<!doctype html>   //html文件
<html>
<head>
		<link rel="stylesheet" herf="css/style.css">
</head>
<body>
		<p>文字</p>
</body>
</html>

4.css添加方法-------优先级
多重样式可以叠加，可以覆盖，就近原则，行内样式>内嵌样式>链接样式>浏览器默认样式

css样式选择器

标签选择器

<style type ="text/css">
   body{
		   background-color:#ccc;
		   text-align:center;
		   font-size:12px;
   }
   h1{font:"黑体";font-size:20px;}
   p{color:red;font-size:16px;}
   hr{width:200px;}
</style>

2.类别选择器

<style type="text/css">
	p{ font-size:12px;}
	.one{font-size:18px;}
	.two{font-size:24px;}
</style>
//html文件
<body>    
	<p class="one">类别1</p>
	<p class="two">类别2</p>
	<p>普通段落文字</p>
</body>

3.ID选择器

<style type="text/css">
  #one{font-size:12px;}
  #two{font-size:24px;}
</style>
//html文件
<body>
<p id="one">文字1</p>

注意：class选择器与id选择器的的区别：ID选择器具有唯一性

4.奇偶选择器

// nth-clild(odd/even)   奇偶选择器
tr:nth-clild(odd){
background:#EAF2D3;}

4.嵌套声明

<style type ="text/css">
		p □ span{color:red;}
</style>
//html文件
<body>
		<p> <span>文字</span>
</body>

5.集体声明

<style type ="text/css">
	h1,p{text-align:center;}
</style>

<body>    //html文件
        <h1>文字</h1>
		<p> 文字</p>
</body>

6.全局声明

<style type ="text/css">
	*{text-align:center;}
</style>

<body>     //html文件
        <h1>文字</h1>
		<p> 文字</p>
</body>

css文本样式

1.字符间距 letter-spacing

<style type ="text/css">
	h1{letter-spacing:2px;}
	h2{letter-spacing:-3px;}
</style>

<body>     //html文件
        <h1>文字</h1>
		<h2> 文字</h2>
</body>

2.行高 line-height

p { height:40px;
background-color:#ccc;
font-size:14px;
line-height:40px;}

<body>     //html文件
		<p> 文字</p>
</body>

3.对齐方式 text-align

<style>
		h1{text-align:center}
		.date{text-align:right}
		.main{text-align:justify}
</style>

<body>
		<h1>文字</h1>
		<p class="date"> 文字</p>
		<p class="main"> 文字</p>
</body>

装饰线 text-decoration

<style>
		h1{text-decoration:overline;}
		h2{text-decoration:line-through;}
		h3{text-decoration:underline;}
</style>

<body>
		<h1>文字</h1>
		<h2>文字</h2>
		<h3>文字</h3>
</body>

没有装饰线 text-decoration ：去掉下划线

<style>
		a{text-decoration:none;}
</style>

<body>
      <ul>
		<li><a herf="#">链接</a></li>
	  </ul>
</body>

5.字体font
在这里插入图片描述

6.颜色
在这里插入图片描述
7.单位

8.文本

css样式背景和超链接

1.背景（空元素需要先定义元素的高度和宽度）
在这里插入图片描述

2.链接的四种状态（伪类选择器）
在这里插入图片描述

鼠标悬停字体放大效果：

a{ font-size:22px;}
a:hover{font-size:120%;}

<a herf="#">文字</a>

css样式列表和表格

1.列表list
在这里插入图片描述
list-style-type

list-style-image

list-style-postion

2.表格table
在这里插入图片描述

表格大小
表格边框

css布局与定位

1.盒子模型：内容（content）内边距（padding）边框（border）外边距（margin）高度（height）宽度（width）

2.overflow属性：当内容溢出盒子框时，overflow属性取值：hidden（超出部分不可见）scroll（显示滚动条）auto（如果超出部分，显示滚动条）
3.border属性

对浏览器默认设置清零：

*{ 
	margin：0;
	padding:0;}

4.盒子模型margin
在这里插入图片描述
margin合并：垂直方向合并，水平方向不合并。
水平居中：

图片、文字水平居中：text-align:center;
div水平居中：margin：0 auto；

css定位机制
1.文档流（flow）：默认状况，从上到下

元素分类：
dispiay:none (元素不会被显示出来)
block（从上往下独占一行，元素的height、width、margin、padding都可以设置）
inline（从左往右不单独占一行，width、height不可设置，width就是它包含的文字或图片的高度，不可改变）
常见的inline元素< span>< a>，显示为inline元素：dispiay:inline；
inline-block元素（不单独占一行，元素的height、width、margin、padding都可以设置）
常见的inline元素< img >，显示为inline-block元素dispiay:inline-block；

2.浮动定位（float）：左右排列
div标签每个独占一行，改变布局使用float属性，left（左浮动）、right（右浮动）、none（不浮动）
清除浮动（clear）：both（清除左右两边浮动）、left和right（只能清除一个方向的浮动）、none（默认值，只能需要移除已指定的清除值使使用）

清除浮动：clear属性
#footer{clear：both；}

3.层定位（layer）：设置position属性，有叠加效果
postion属性：
static（静态默认值）
fixed（固定定位，相对于浏览器窗口）
relative（相对定位，相对于直接父元素定位）:定位的元素脱离正常文档流，但在文档流中位置依然存在
absolute（绝对定位，相对于static定位以外的第一个父元素）：定位元素脱离正常文本流，但与relative的区别在于原位置不在存在
在这里插入图片描述
left属性、right属性、top属性、bottom属性、z-index属性

沐子**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS样式

CSS样式添加方法1.css添加方法------行内，css样式被添加到p标签<p style="color:red;">2.css添加方法-------内嵌样式，header标签之内，只对当前页面的所有p标签有效<style type="text/css"> p{ color:red; } </style>3.css添加方法-------单独文件submit扩展：link+css4.css添加方法-------优先
复制链接

扫一扫