CSS样式学习(一)
本篇内容:
一、CSS简介
二、样式属性
三、CSS选择器
(一)基础选择器
(二)伪类选择器
1)链接伪类选择器
2)结构伪类选择器
3)目标伪类选择器
(三)属性选择器
(四)关系选择器
(五)伪元素选择器
四、设置CSS样式的方法
CSS样式是网页的重要组成部分,就像是化妆品,用的好与差,决定了用户对网页的第一印象。
一、CSS简介
CSS通常被称为样式叠层表,通过对标签增加样式,实现字体,颜色,背景,元素大小等,用于网页排版的细化处理。
基本语法:
- 以键值对的形式出现
- 以分号结尾
二、样式属性
(一些简单的属性不再赘述,直接写在注释里,更多属性更多详细的用法请自行查找,这里仅简单介绍)
<style>
p{
/* 斜体 */
font-style: italic;
/* 字体大小 */
font-size: 30px;
/* font-family的值填写中文如果出现乱码,可以尝试英文名字或unicode编码 */
font-family:"宋体";
/* 粗体 */
font-weight:bold;
/* 红色字体 */
color:red;
}
</style>
<body>
<p>这是一段字体为30像素的文字</p>
<p>这是一段字体为30像素的文字</p>
</body>
实现效果:
css中提供了很多方便的优化方案来简化代码,比如以上这些代码,可以进行如下优化
<style>
p{
/* {font: font-style font-weight font-size/line-height font-family;} */
font:italic bold 30px/10px "宋体";
/* 红色字体 */
color:red;
}
</style>
<body>
<p>这是一段字体为30像素的文字</p>
<p>这是一段字体为30像素的文字</p>
</body>
实现效果:
三、CSS选择器
(一)基础选择器
<style>
/* 标签选择器 */
p{
color:red;
}
/* id选择器 */
#span_1{
color:blueviolet;
}
/* 类选择器 */
.span_2{
color:orange;
}
.size{
font-size: 20px;
}
</style>
<body>
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
<span id="span_1">第四段文字</span><br/>
<span class="span_2">第五段文字</span><br/>
<span class="span_2">第六段文字</span>
<span class="span_2 size">多类名的情况</span>
</body>
多类名的情况就是给标签设置了多个类名,并且每个类名都设置了不同的CSS样式,那效果就能在标签上同时实现。
实现效果:
除了id选择器,类选择器和标签选择器之外,还有通配符选择器(*),可以对所有的标签设置样式。
(二)伪类选择器
1)链接伪类选择器
<style>
/* 链接未点击过的状态 */
a:link{
color:green;
}
/* 点击过的状态 */
a:visited{
color:yellow;
}
/* 鼠标悬停时的状态 */
a:hover{
color:yellowgreen;
}
/* 按下鼠标的状态 */
a:active{
color:violet;
}
</style>
2)结构伪类选择器
- :first-child 选择第一个子元素
- :last-child 选择最后一个子元素
- :nth-child(n) 选择第n个子元素
- :nth-last-child(n) 选择倒数第n个子元素
<style>
div p:first-child{
color:red;
}
div p:last-child{
color:orange;
}
div p:nth-child(3){
color:orchid;
}
div p:nth-last-child(3){
color:palegreen;
}
</style>
实现效果:
3)目标伪类选择器
- :first-of-type 选择同类元素第一个子元素
- :last-of-type 选择同类元素最后一个子元素
- :nth-of-type(n) 选择同类元素第n个元素
- :only-of-type 选择子元素中标签类型唯一的标签
<style>
div>p:first-of-type{
color:red;
}
div>span:last-of-type{
color:violet;
}
div>p:nth-of-type(3){
color:blue;
}
div :only-of-type{
color:rgb(24, 155, 179);
}
</style>
<div>
<span>第一段文字</span>
<p>第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>
<p>第五段文字</p>
<div>only</div>
<p>第六段文字</p>
<p>第七段文字</p>
<span>第八段文字</span>
</div>
显示效果:
- :root 选择根元素,即html标签
- :not() 选择某个标签之外的所有标签
- :empty 选择内容为空的标签,有文本节点无法选择到
- :target 选择被激活的target。所谓target,就是某个标签的id被用作a标签的链接地址,这时候,a标签被点击之后,那个被使用id的标签就是一个被激活的target。
<style>
:root{
background: gray;
}
p:not(.second){
color:salmon;
}
p:empty{
width: 20px;
height: 20px;
background: rebeccapurple;
}
:target{
color: aqua;
}
</style>
<p id="first">ssss</p>
<p class="second">aaaa</p>
<p class="second">bbbb</p>
<p>bbbb</p>
<p><p>
<a href="#foot" id="head">链接</a>
<a href="#head" id="foot">链接</a>
显示效果:
(三)属性选择器
简单来说,就是选择标签并指定属性
- [attribute=value] 属性对应值与value完全相同
- [attribute~=value] 属性对应值与value有部分相同或完全相同
- [attribute^=value] 属性对应值以value开头
- [attribute$=value] 属性对应值以value结尾
- [attribute*=value] 属性对应值中包含value
- [attribute|=value] 属性对应值以value整个单词开头
<style>
p[id="cat"]{
color:red;
}
p[class~="dog"]{
color:orchid;
}
p[class~="bird"]{
color:palegreen;
}
p[info^="love"]{
color: blueviolet;
}
p[info$="ful"]{
color: wheat;
}
p[info*="ick"]{
color: salmon;
}
p[info|="clear"]{
color: aqua;
}
</style>
实现效果:
(四)关系选择器
<style>
/* 这里以空格隔开的是后代选择器,隔了两代选取到p标签 */
.outside .first{
color:red;
}
/* 这里的'div.inside'是交集选择器,以'>'隔开的是子代选择器 */
div.inside>p{
font-size: 20px;
}
/* 这里以'+'隔开的是兄弟选择器,以','隔开的是并集选择器 */
.first+p,.third{
color: blue;
}
</style>
<div class="outside">
<div class="inside">
<p class="first">66666</p>
<p class="second">77777</p>
<p class="third">88888</p>
</div>
</div>
效果实现:
(五)伪元素选择器
<style>
/* 选中第一行第一个文字 */
p::first-letter {
font-size: 30px;
color: firebrick;
}
/* 选中第一行 */
p::first-line {
font-size: 20px;
color: greenyellow;
}
/* 高亮选中的文字 */
p::selection {
color: red;
}
</style>
<p>
HTML 标签原本被设计为用于定义文档内容。<br/>通过使用 h1、p、table 这样的标签,<br/>
HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。<br/>
同时文档布局由浏览器来完成,而不使用任何的格式化标签。
</p>
实现效果:
四、设置CSS样式的方法
首先,三种方法的效果是一模一样的,css样式较多时,建议使用外联式,防止代码冗长杂乱。
1)内联式
直接把style样式写在标签里形成关联的方法。
<p style="color:red">CSS内联式</p>
实现效果:
2)嵌入式
通过在head头标签里写style标签,然后在style标签中通过css选择器写样式的方法;从整个源代码来看,就是一块嵌入进去的代码块。
<style>
p{
color:red;
}
</style>
<p>CSS内联式</p>
效果实现:
3)外链式
通过外部导入css文件的方式设置css样式
首先自己创建一个css文件
内容如下:
p{
color:red;
}
网页代码
<head>
<link href="css_03.css" type="text/css" rel="StyleSheet"/>
</head>
<p>CSS内联式</p>