css基础知识讲解 -1
css基础知识
概括了解
CSS-层叠样式表
(Cascading Style Sheets)层叠样式表
用途
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
分类
-
内部样式-head区域style标签里面
<style></style>
-
外部样式-link调用
格式: <link href="main.css" rel="stylesheet" type="text/css">
-
内联样式-标签元素里面(style=“属性:属性值;属性:属性值”)
相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):
内联样式表(标签内部) > 嵌入样式表(当前文件中)> 外部样式表(外部文件中)
格式
样式规则格式: 选择符{属性:值}
单一选择符的复合样式声明应该用分号分割: 选择符{属性1:值1; 属性2:值2}、
a{
font-size:36px;
color:#FF0004;
}
常用属性
基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
/*值的不同写法和单位
除了英文单词 red,我们还可以使用颜色值 #ff0000:*/
p { color: #ff0000; }
/*为了节约字节,我们可以使用 CSS 的缩写形式:*/
p { color: #f00; }
/*我们还可以通过两种方法使用 RGB 值:*/
p { color: rgb(255,0,0); }
p { color: rgba(0,0,0,0.9); }
选择器的运用
-
id:定义元素在页面中独一无二的名称
#id
-
class:引用类选择器时使用(CSS中)
.class
, class命名不能以数字开头
选择器的分组
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
h1,h2,h3,h4,h5,h6 {color: green;}
派生选择器
分3种情况:后代选择器,子元素选择器,相邻兄弟选择器
- 后代选择器
如:h1 em {color:red;}
表示在h1标签内部的所有em标签
如:
<h1>
<em>111</em>
</h1>
或者:
<h1>
<h2>
<em>222</em>
</h2>
</h1>
-
子选择器
子选择器只会选择某个元素的子元素,而不会扩大到任意的后代元素。
h1 > strong {color:red;}
h1标签的内部第一个标签是strong时, 该strong标签起作用
如:
<h1>
<strong>111111</strong>
</h1>
不包括下面这种情况:
<h1>
<h2>
<strong>222222</strong>
</h2>
</h1>
- 相邻兄弟选择器
h2 + strong {color:red;}
h2标签的下一个strong标签起作用
<h1>
<h2>This is a heading<h2>
<strong>This will be styled</strong> <!--起作用-->
<strong>This will not be styled</strong> <!--不起作用-->
<h1>
li + li {color:red;}
<div>
<ul>
<li>List item 1</li> <!--不起作用-->
<li>List item 2</li> <!--起作用-->
<li>List item 3</li> <!--起作用-->
</ul>
<ol>
<li>List item 1</li> <!--不起作用-->
<li>List item 2</li> <!--起作用-->
<li>List item 3</li> <!--起作用-->
</ol>
</div>
这个例子中li+li是选择紧挨着li后面的第一个<li>,所以第一个<li>不会被选择;
而第二个<li>是紧挨着第一个li的,所有会被选择;
第三个<li>是紧挨着第二个<li>的,也会被选择。
CSS链接样式
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
本文来自博客园,作者:aJream,转载请记得标明出处:https://www.cnblogs.com/ajream/p/15383553.html