CSS样式

最新推荐文章于 2021-08-04 08:43:38 发布

weixin_38902950

最新推荐文章于 2021-08-04 08:43:38 发布

阅读量168

点赞数

分类专栏： Web前端开发文章标签： CSS样式

本文链接：https://blog.csdn.net/weixin_38902950/article/details/84189648

版权

Web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、CSS语法

p{
	font-size:12px;
	color:blue;
	fond-weight:bold;
}

2、CSS添加方法

1、行内
<p style="font-size:12px;color: blue;">演示文字</p>

2、内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			font-size:12px;
			color:blue;
			fond-weight:bold;
		}	
	</style>

</head>
<body>
	<p>演示文字</p>
</body>
</html>

3、单独文件
单独存一个 .css文件
p{
	font-size:12px;
	color:blue;
	fond-weight:bold;
}	
然后在head中中引用它
<link rel="stylesheet" href="dir/xxx.css">

3、 CSS选择器类型

1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- <link rel="stylesheet" href="dir/xxx.css"> -->
<style>
	body{
		background-color: #ccc;
		text-align: center;
		font-size: 15px;
	}
	h1{font:"黑体";font-size: 20px;}
	p{color:red;font-size: 16px;}
</style>

</head>
<body>
	<h1>标题</h1>
	<hr>
	<p>正文段落</p>
	版权所有
</body>
</html>

2、类别选择器
<style type="text/css">
	p {font-size:12px;}
	.one{font-size: 18px;}
	.two{font-size:24px;}
</style>

<body>
	<p>类别</p>
	<p class="one">类别1</p>
	<p class="two">类别2</p>
</body>

3、ID选择器
<style type="text/css">
    #one{font-size:12px;}
    #two{font-size:24px;}
</style>

<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>
与class的区别在于ID的唯一性

4、嵌套声明
<style type = "text/css">
    p span{color:red;}
</style>

<body>
    <p><span>天使投资<span>是投资方式的一种</p>
</body>

5、集体声明
<style type = "text/css">
    h1,p{text-align:center;}
</style>

<body>
    <h1>欢迎访问论坛</h1>
    <p>欢迎</p>
</body>

6、全局声明
*{text-align:center;}

7、混合
多个class选择器一起使用，ID选择器不可以多个同时使用
<p class = "one yellow left">something</p>

4、文本和字体样式

1、单位
px:像素
em：字符，自动使用用户所使用的字体
%：百分比

2、HTML DOM树集成关系
                ———— head
               |
               |
文档————html————             ____div 
               |            |
               |____ body___|            ____h1
                            |           |
                            |____div____|
                                        |
                                        |____p 
p标签会从div标签继承过来默认样式

3、颜色
rgb(x,x,x)     0-255
rgb(x%,x%,x%)  0%-100%
rgba(x,x,x,y)  y,透明度，0.0完全透明，1.0完全不透明
#rrggbb        十六进制数

4、文本
属性                 描述              取值
color              文本颜色        rgb(255,0,255)
letter-spacing     字符间距        2px，-3px
line-height          行高         14px 1.5em 120%
text-align           对齐         center left right justify
text-decoration     装饰线         none   overline underline line-through
text-indent         首行缩进       2em

利用line-height设置垂直居中
p{
    height:40px;
    line_height:40px;
}

利用text-decoration去掉超链接的下划线，只需要给a标签设置 text-decoration：none

5、文本
属性               描述             
font         在一个声明中设置所有的字体属性      font：bold 18px '幼圆'
font-family       字体系列                     
font-size         字号                        14px 120%
font-style        斜体                        italic
font-weight       粗体                        bold

简化font：
font：斜体    粗体   字号/行高   字体;
font：italic  bold  16px/1.5em '宋体';

5、背景和超链接

1、背景
background-color:
background-image: url("logo.jpg");
background-repeat:repeat repeat-x repeat-y no-repeat
background: 颜色 图片 repeat

example：
div{
    height：30px;
    width:600px;
    
    background: url("images/bg1.jpg")  repeat-x;
}

2、超链接
链接的4种状态：
a：link     普通的、未被访问的链接
a:visited   用户已经访问的链接
a:hover     鼠标在链接上方悬停
a:active    链接被点击的时刻
: 伪类选择器

按照这样的次序：love&Hate
exm：
    	a:link {
		color: #09f;/*浅蓝*/
		text-decoration: none;
	}
	a:visited {
		text-decoration: none;
		color: #930;/*红*/
	}
	a:hover {
		text-decoration: underline;
		color: #03c;/*深蓝*/
	}
	a:active {
		text-decoration: none;
		color: #03c;/*深蓝*/
	}

6、列表和表格

1、列表list
无序列表ul和有序列表ol共用样式
属性                描述
list-style         总体
list-style-image   为列表项标志设置图像      url("xxx.jpg"）
list-style-position 标志的位置              inside outside
list-style-type     标志的类型

2、表格
表格大小：width，height属性
table{
    width:500px;
    height:200px;
}

表格边框：border属性
table，td，th{
    border:1px solid #eee
}

border-collapse:collapse;

奇偶选择器：
:nth-child(odd|even)
tr:nth-child(odd){
    backgroud-color:#eee;
}

附件：常用颜色大全

https://www.cnblogs.com/general001/articles/4151861.html

weixin_38902950

关注

0
点赞
踩
0

收藏

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

1、CSS语法p{ font-size:12px; color:blue; fond-weight:bold;} 2、CSS添加方法1、行内&lt;p style="font-size:12px;color: blue;"&gt;演示文字&lt;/p&gt;2、内嵌样式&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;
复制链接

扫一扫