CSS的使用方式

最新推荐文章于 2024-07-13 11:07:17 发布

原创最新推荐文章于 2024-07-13 11:07:17 发布 · 278 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

内联样式表

CSS代码和HTML代码放在同一个文件中
用法：借助标签中的style属性，在属性中设置样式

<!-- 内联样式 -->
  <p style="color: red;">p标签1</p>

内联样式表

CSS代码和HTML代码放在同一个文件中用法：借助网页中的style标签，在标签中设置样式，一般情况下style标签写在head标签的最后。

<!-- 内部样式 -->
  <style type="text/css">
   /* 把p标签的文本颜色改为红色 */
   p{
    color: red;
   }
  </style>

外部样式表

单独创建一个css文件

/* 需求：把所有div标签的文本颜色改成蓝色 */
div{	color: blue;}

用法：通过link标签引入到html当中

  <link rel="stylesheet" type="text/css" href="../css/Demo1.css">

rel：当前文件于引入文件之间的关系层叠样式表
type：引入文件的类型
href：引入文件的地址

CSS的基础语法

h1：需要添加样式的元素
color：给元素添加什么样式
red：样式的值

选择器{
样式：样式值;
}

基本选择器

元素选择器用法：元素名
含义：选中网页中相同的元素

<!-- 给网页中span标签的文本颜色设置成绿色 -->
span{
	color: green;
}
<span>彼得，英国留学</span>

Id选择器用法：#id值
含义：选中网页中id为特定值的元素Id一般在使用的时候保证其唯一性，属性没有任何意义，帮助css/js选择元素

#myschool{
	color: red;
}
<div id="jqschool">玛丽，剑桥留学</div>

class选择器用法：.class值
含义：选中网页中class为某个特定值的元素class属性没有任何意义，帮助css/js选择元素

.school{
	color: #0000FF;
<div class="school">彼得，哈佛大留学</div>
}

子元素选择器用法：父元素子元素 —> 选择器1 选择器2
含义：通过选择器1选择元素Q，选择器2在元素Q的子标签中再选择

.myp #myspan{
	color: red;
	<body>
  <p class="myp">
   <span id="myspan">6-30位字母、数字或“_”,字母开头</span>
  </p>
 </body>
}

群组选择器用法：选择器1,选择器2,选择器3
含义：只有元素被其中一个选择器选中那么就设置对应样式

#qqid,.intro,a{
	color: #00FFFF;
	<body>
  <div id="qqid">
   i am cxy
  </div>
  <span class="intro">
   shsxxt
  </span>
  <a href="">big data</a>
  <p>
   last p
  </p>
 </body>
}
<body>
  <div id="qqid">
   i am cxy
  </div>
  <span class="intro">
   shsxxt
  </span>
  <a href="">big data</a>
  <p>
   last p
  </p>
 </body>