CSS的一些常用知识点

最新推荐文章于 2022-07-29 23:59:40 发布

bighuan

最新推荐文章于 2022-07-29 23:59:40 发布

阅读量787

点赞数

分类专栏： JavaWeb 文章标签： CSS 标签选择器使用CSS的三种方式

本文链接：https://blog.csdn.net/bighuan/article/details/67687268

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一,概述

CSS中的一些常用用法老是忘记,翻代码吧,有时就找不到.还是写在博客里放心,忘记了就回来看一看.

二,使用CSS样式的三种方式

1)通过标签中的style属性使用CSS样式(不推荐使用,没办法复用)

<a style="color:#00CC33;text-decoration:none" href="#">新闻</a>

2)引用外部的CSS文件,推荐使用

引用外部CSS 文件有两种有两种方式:

a,推荐使用这种方式引用外部css文件

<link href="astyle.css" rel="stylesheet"/>

b,引用外部文件的第二种方式

<style type="text/css">
    @import url(astyle.css);
</style>

astyle.css文件内容:

@charset "utf-8";
/* CSS Document */
a{
	color:#993300;
	text-decoration:none;
}

3)直接在当前页面写css样式,复用性不强

<style type="text/css">
	a{
	color:#0066CC;
	text-decoration:none;
	}
</style>

三,几种选择器

直接粘贴代码,稍候解释.

<style type="text/css">
		
	/*1,标签选择器*/	
	div{
	background-color:#0000ff;
	}
	
	/*2,类选择器,需要在标签中加上相应的class*/
	.two{
		background-color:#00FF33;
	}

	/*3,id选择器,需要在标签中加上相应的id,id选择器只能有一个id,否则容易出错.id选择器优先于类选择器和标签选择器,类选择器优先于标签选择器*/
	#one{
		background-color:#FF0066;
	}
	
	/*4交集选择器*/
	div span{
	background-color:#FF0033;
	size:34px;
	}
	
	/*并集选择器*/
	a,span{
	size:60px;
	
	}
	
</style>

对应body中的内容如下:

<body>
    <a style="color:#00CC33;text-decoration:none" href="#">新闻</a>
    <a href="#">百度</a>
    <a href="#">新浪</a>
    <a href="#">微博</a>
    <a href="#">腾讯</a>
    
    <div class="two"><h3 >标题集合<span>标签选择器</span>了撒旦法士大夫</h3></div>
    <div class="test" id="one""><h3>标题</h3></div>
   <span>hfasfdjlsafjlsadf花花范德萨发简历</span>
</body>