CSS知识点小结

最新推荐文章于 2023-08-02 11:12:52 发布

bird_tp

最新推荐文章于 2023-08-02 11:12:52 发布

阅读量244

点赞数

分类专栏： java基础学习文章标签： css html 前端

本文链接：https://blog.csdn.net/bird_tp/article/details/125353081

版权

java基础学习专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、css与html结合的四种方式

 1.<style type="text/css">
  p{
      line-height: 37px;
      text-indent: 37px;
      color: black;
      font-size: 19px;
}
</style>
style标签方式
2.<style type="text/css">
    @import url("myDiv.css");
</style><!-- 导入方式 -->
3.<link rel="stylesheet" type="text/css" href="aa.css"><!-- 链接方式 -->
4.<p style="line-height:30px;text-indent:10px">党委书记罗成翼教授致欢迎辞。他代表学校党委意见，并祝愿本次会议<span id="id1">圆满</span>成功。</p>
styles属性方式

二、样式优先级

由上到下，由外到内。优先级由低到高。——总之，一般情况是以后加载为主

三、三种基本选择器

/*标签选择器*/
 td{
     border:3px blue solid;
     background-color: red;
 }
/*设置p标签中的 类样式a*/
 p.a{
     line-height:30px;
     color:#ff2200;
 }
*设置id选择器*/
 #id1{
   font-size: 22px;
   text-decoration: underline;
 }

四、选择器的优先级

标签名选择器 < class选择器 < id选择器 < style属性

五、扩展选择器

/* 关联选择器 ,只对 div中的 span标签中的 b标签 进行设置 */
	  div span b{
	    font-size: 22px;
	    text-decoration: line-through;
	    color:red;
	  }
	  /*组合选择器，同时对p和div进行设置*/
	  p,div{
	  line-height: 30px;
	  }
	  .cc,span b{
	     color:#00ff00;
	  }
/*伪元素选择器*/
      span:hover{
	     font-size: 25px;
	     color:#ffff00;
  }