css的常见用法

最新推荐文章于 2024-07-09 15:49:17 发布

coder

最新推荐文章于 2024-07-09 15:49:17 发布

阅读量593

点赞数

分类专栏： css 文章标签： css stylesheet class div float url

本文链接：https://blog.csdn.net/mengxiangbaidu/article/details/6991460

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

后代选择器
<style type="text/css">
#test{
background:#3F6;	
}
div#a{
	background:#F00;	
}
h1 #div1{/*后代选择器*/
	background:#00C;	
}
h1,h2{
	background:#00F;	
}
</style>
</head>

<body>
<h1 id="test"><div id="div1">abc</div></h1>  
<div id="a">abc</div> 
</body>
</html>
行内样式
<h1 style="color:#ff0000;font-size:14px;text-decoration:underline;font-style:Italic;
font-weight:lighter">标题1</h1>
内嵌式
<style type="text/css"> 
<!--
h1{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 
-->
</style>
</head>
<body>
<h1>标题1</h1>


链接式
 
<link  type="text/css" rel="stylesheet" href="css.css"/>
导入式
<style type="text/css">
<!--
@import url(css.css);
-->
</style>

CSS选择器

标记选择器
<style type="text/css"> 
<!--
h1{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 
-->
</style>
类别选择器(”.”)可以应用到不同的元素
<style type="text/css">
<!--
.one{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 

-->
</style>
</head>
<body>
<div class="one">标题1</div>
ID选择器只能针对制定id的元素设置样式，id不能重复
<style type="text/css">
<!--
#one{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 

-->
</style>
</head>
<body>
<div id="one">标题1</div>


三者可以集体声明
<!--
h1,#one{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 

-->
</style>
</head>
<body>
<h1>标题1</h1>
<div id="one">标题1</div>


选择器的嵌套
<style type="text/css">
<!--
#one h1{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 

-->
</style>
</head>
<body>
<h1>标题1</h1>
<div id="one">内容<h1>标题1</h1></div>
 


Css子元素可以继承父元素的样式，并且可以可以自定义自己的样式


<style type="text/css">
<!--
p.one{
	color:#ff0000;
	font-size:14px;
	text-decoration:underline;
	font-style:Italic;
	font-weight:lighter
} 

-->
</style>
</head>
<body>
<h1>标题1</h1>
<p class="one">abc</p>
<div class="one">内</div>

 
Css文字效果
Css文字样式
1.	字体
font-family:黑体,幼圆,Arial,楷体_GB2312
2.	文字的大小
font-size:12pt/in/cm/mm/px
3.	文字颜色
color:rgb(0%,0%,80%);
color:rgb(255,0,0);
color:#ff0000;
color:blue;
4.	文字粗细
font-weight:bold/normal/lighter/数字
5.	斜体
font-style:italic/normal
6.	下划线、顶划线、删除线
text-decoration:underline/overline/line-through/blink
7.	英文字母的大小写
text-transform:capitalize(单词首字母大小)/uppercase(全部大写)/lowercase(全部小写)
8.	
Css段落样式
1.	段落水平对齐方式
2.	段落垂直对齐方式
vertical-align:top/bottom/middle顶端、顶端、中间
3.	行间距、字间距
4.	首字放大
float:left


css图片效果
1.	图片样式
图片边框
border-style:dashed边框样式
border-color:#ff0000边框颜色
border-width:12px边框粗细

=>
border:dashed 12px blue;

border-left:
border-right:
border-top:

图片缩放
width:40%根据浏览器进行变化
height:



2.	图片对齐方式
text-align:left水平
vertical-align:text-bottom/super/baseline/top垂直
3.	图文混排
float:left/right/
margin:
padding-left:
padding-right:
padding-top:
4.	





css页面背景
background-color:transparent透明
background-image:url();
背景图片的重复
background-repeat:repeat-y/repeat-x
背景图片位置
background-position:bottom right;
固定背景图片
background-attachment:fixed


background:url() no-repeat center top;

表格和表单


链接特效

a:link{
  color:#ff0000;
  text-decoration:none/underline;
}
a:visited{ \a:hover{

cursor:help鼠标效果


滚动条

coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的常见用法

后代选择器#test{background:#3F6; }div#a{ background:#F00; }h1 #div1{/*后代选择器*/ background:#00C; }h1,h2{ background:#00F; }abc abc 行内样式<h1 style="color:#ff0000;
复制链接

扫一扫