CSS样式（基础）

最新推荐文章于 2023-03-11 18:29:18 发布

小兔子乖乖-L

最新推荐文章于 2023-03-11 18:29:18 发布

阅读量208

点赞数

分类专栏： web前端文章标签：前端 CSS样式

本文链接：https://blog.csdn.net/weixin_44705725/article/details/93514183

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、CSS语法
在这里插入图片描述
二、CSS添加方法
1.CSS添加方法——行内

<p style="color:red;">
天使投资指早期投资，尤其指个人早期投资
</p>

2.CSS添加方法——内嵌样式

<!DOCTYPE HTML>
<html>
<head>
<title>abc</title>
	<meta charset="utf-8">
     <style type="text/css">
     	p{
     		color:red;/*设置字体颜色*/
     	}
     </style>
      </head>
      <body>
      <p>天使投资指早期投资，尤其指个人早期投资</p>
      </body>
      </html>

注意
在这里插入图片描述
3.CSS添加方法——单独文件

<!DOCTYPE html>
<html>
<head>
<title>abc</title>
	<meta charset="utf-8">
     <link rel="stylesheet"  href="css/style.css">
      </head>
      <body>
      <p>天使投资指早期投资，尤其指个人早期投资</p>
      </body>
      </html>

其优点为
在这里插入图片描述
4.CSS添加方法——优先级

三、CSS选择器
1.标签选择器

<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{wideth:200px;}
</style>

2.类别选择器

<style type="text/css">
p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
 </style>

在对应的标签之内，采用他的class属性来进行类别样式的引用，给它设置的属性的取值，就是类别样式的名称，并且注意点需要去掉。

<body>
<p class="one"> 类别1 </p>
<p class="one"> 类别1 </p>
<p class="two"> 类别2 </p>
<p class="two"> 类别2 </p>
<p>普通段落中的文字 </p>
</body>

3.ID选择器(在html里只能唯一被引用一次）
css样式

<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>

4.集体声明

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

5.全局声明

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

6.混合
在这里插入图片描述
四、CSS样式之文字样式

1.单位
在这里插入图片描述
2.颜色

3.文本

(1).字符间距letter-spacing

  <style>
       h1{letter-spacing:2px;}
    h2{letter-spacing:-3px;}
    </style>

(2).行高 line-height

   <style>
     p{font size:14px;
       line-height:2em;}
</style>

(3).对齐方式text-align

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

(4).装饰线 text-decoration

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

4.字体
在这里插入图片描述
五、CSS样式之背景，超链接样式
1.背景属性
2.超链接
鼠标悬停放大字体

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

六、CSS样式之列表，表格样式
列表
1.list-style-type
在这里插入图片描述 2.list-style-position

<style type="text/css">
   .inside{
   list-style-position:inside
   }
    .outside{
   list-style-position:outside
   }
   </style>

3.list-style-image

list-style-image:
url("images/bullet1.gif");

4.表格
在这里插入图片描述
5.奇偶选择器：nth-child(odd|even)

tr:nth-child(odd){
background-color:#EAF2D3;}

小兔子乖乖-L

关注

0
点赞
踩
0

收藏

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

一、CSS语法二、1.CSS添加方法——行内<p style="color:red;">天使投资指早期投资，尤其指个人早期投资</p>2.CSS添加方法——内嵌样式<!DOCTYPE HTML><html><head> <style type="text/css"> p{ ...
复制链接

扫一扫