CSS样式学习（一）

最新推荐文章于 2023-12-09 03:00:00 发布

Lalo_iy

最新推荐文章于 2023-12-09 03:00:00 发布

阅读量338

点赞数

文章标签： css

本文链接：https://blog.csdn.net/shuttle33/article/details/100761446

版权

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>

Lalo_iy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式学习（一）

CSS样式学习（一）CSS样式是网页的重要组成部分，就像是化妆品，用的好与差，决定了用户对网页的第一印象。一、CSS简介CSS通常被称为样式叠层表，通过对标签增加样式，实现字体，颜色，背景，元素大小等，用于网页排版的细化处理。基本语法：以键值对的形式出现以分号结尾二、样式属性（一些简单的属性不再赘述，直接写在注释里，更多属性更多详细的用法请自行查找，这里仅简单介绍）<s...
复制链接

扫一扫