CSS（第一篇）

最新推荐文章于 2024-08-14 11:57:27 发布
最新推荐文章于 2024-08-14 11:57:27 发布
阅读量1k 收藏 4
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45947655/article/details/108917392
版权

CSS

1.初识CSS

1.1什么是CSS

层叠样式表（级联样式表）：Cascading Style SheetSEO

CSS : 表现（美化图片）

字体，颜色，边距，高度，宽度，背景图片，网页浮动…

1.2CSS的发展史

CSS 1.0

CSS 2.0 DIV（块）+ CSS, HTML与CSS结构分离的思想，网页变得简单，SEO

CSS 2.1 浮动，定位

CSS 3.0 圆角，阴影，动画…浏览器兼容性

1.3快速入门

可在HTML页面直接编写CSS：

<style>
    ......
</style>

可产生一个link链接，单独一个页面编写CSS（更加规范）：

<link rel="stylesheet" href="...(CSS页面地址)">

CSS的优势：

1.内容与结构分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4.建议使用独立于HTML的CSS文件

5.利用SEO，容易被搜索引擎收录

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
        }
        p{
            color: blue;
        }
    </style>
</head>
<body>

    <h1>学习Java</h1>
    <p>CSS</p>

</body>
</html>

2.类选择器 class

class="…"

用“.”选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .标题{
            color: blue;
        }
        .LOL{
            color: red;
        }
    </style>
</head>
<body>

    <h1 class="标题">学习Java</h1>
    <p class="LOL">CSS</p>

</body>
</html>

3.id选择器

id="…"

用“#”选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #标题{
            color: blue;
        }
        #LOL{
            color: red;
        }
    </style>
</head>
<body>

    <h1 id="标题">学习Java</h1>
    <p id="LOL">CSS</p>

</body>
</html>
2.2层次选择器

1.后代选择器：

某个元素后面所有与您选中的元素类型相同的元素都会被选中

body p{
    color: red;
}

body后面所有p标签元素都会被选中

2.子选择器

某个元素后面仅一代与您选中的元素类型相同的元素都会被选中

body>p{
    color: red;
}

跟在body后面一代的p标签会被选中。

假如body内有个列表，列表内又设置了p标签，那么这里的p标签将不会被选中。（这就是仅一代的含义）

3.弟弟选择器

某元素下一位您所选择类型的元素，且是同代的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #LOL+p{
            color: red;
        }
    </style>
</head>
<body>

    <h1 id="标题">学习Java</h1>
    <p id="LOL">CSS</p>
    <p id="OL">CSS</p>

</body>
</html>

会选中id为“OL”的p标签，且是同代的。

4.通用选择器

选中某元素后面“您所选择类型的同代的所有”元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #LOL~p{
            color: red;
        }
    </style>
</head>
<body>

    <h1 id="标题">学习Java</h1>
    <p id="LOL">CSS</p>
    <p id="OL">CSS</p>
    <p class="OL">CSS</p>
    <p class="OL">CSS</p>

</body>
</html>

会选中id为“LOL”后面所有同一代的p标签元素。

2.3属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 200px;
            width: 200px;
            border-radius: 10px;
            background: black;
            text-align: center;
            color: blue;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/

        /*a[id=wangwei]{*/
        /*    background: aqua;*/
        /*}*/

        /*a[class*="links"]{*/
        /*    background: rebeccapurple;*/
        /*}*/

        /*a[href^=http]{*/
        /*    background: red;*/
        /*}*/

        a[href$=uk]{
            background: red;
        }
    </style>

</head>
<body>

    <p class="demo">
        <a href="https://www.manchester.ac.uk" class="links item first" target="_blank" id="wangwei">曼彻斯特大学</a>
        <a href="https://www.bilibili.com/" class="links" target="_blank" title="tests">哔哩哔哩动画</a>
        <a href="https://www.bilibili.com/read/cv5702420" class="item" target="_blank">完整Java学习路线</a>
        <a href="https://www.bilibili.com/video/BV1YJ411a7dy?p=8" class="first" target="_blank">CSS教学</a>
        <a href="https://hao.360.com/" class="links item" target="_blank">360浏览器</a>
        <a href="https://space.bilibili.com/95256449" class="links item first" target="_blank">狂神说</a>
        <a href="nothing" class="links item" target="_blank">HTML5教学</a>

    </p>

    <p><a href="https://www.eic.org.cn/school/detail/311" class="links item first" target="_blank" id="xuanjie">MD</a></p>

</body>
</html>css

1.选中所有带有“[]”内属性的元素：

a[id]{
    background: yellow;
}

（选中了所有带有id属性的元素）

2.选中属性等于“[]”内标明的内容的元素：

a[id=wangwei]{
    background: aqua;
}

(选中了id=wangwei的元素)

3.选中所有class属性包含"links"的元素

a[class*="links"]{
    background: rebeccapurple;
}

（“*=”表示“包含”，而“=”表示“等于”）

4.选中所有以“http”开头的“href”属性的元素

a[href^=http]{
    background: red;
}

5.选中所有以“uk”结尾的“href”属性的元素

a[href$=uk]{
    background: red;
}

3.美化网页元素

3.1字体美化
3.1.1 span标签：

​ <span id="wangwei">简</span>

用id为“wangwei”的span标记“简”。

3.1.2 字体：
（1）字体种类：

font-family: 楷体;

（2）字体颜色：

color: red;

（3）字体大小：

font-size: 50px;

（4）字体粗细：

font-weight: bolder;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            font-family: 楷体;
            color: red;
        }
        h1{
            font-size: 50px;
        }
        .xuanjie{
            font-weight: bolder;
        }

        #wangwei{
            color: aqua;
        }
    </style>

</head>
<body>

<h1>故事<span id="wangwei">简</span>介</h1>

<p class="xuanjie">
    平静安详的元泱境界
</p>

<p>
    在偏远的兽国窝窝乡
</p>

</body>
</html>
3.3文本样式
1.颜色：

color rgb rgba

2.文本对齐的方式：

文本居中：text-align = center

3.首行缩进：

缩进两个字：text-indent: 2em

4.行高：

此行有5个字这么高（行内字符不会上下居中）：height: 5em

此行有5个字这么高（行内字符会上下居中）：line-height: 5em

5.装饰：

text-decoration

6.文本图片水平对齐：

vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            color: rgba(0,255,255,1);
            text-align: center;
        }
        p{
            text-indent: 2em;
            /*background: red;*/
            /*height: 5em;*/
            line-height: 5em;
            text-decoration: overline red;
        }
        a{
            text-decoration: none;
        }
    </style>

</head>
<body>

    <h1>故事简介</h1>

	<p><a href="">MMDD</a></p>
	
    <p>
    平静安详的元泱境界
    </p>

    <p>
    在偏远的兽国窝窝乡
    </p>

</body>
</html>
3.4超链接伪类

1.a:hover{}

a:hover{
    color: red;
    font-size: 2em;
}

鼠标悬停时字体将做出改变

2.a:active

a:active{
    color: green;
}

鼠标按住时字体将做出改变

3.阴影

.asd{
    text-shadow: red 10px 10px 3px;
}

字体会有阴影效果：颜色，向上，下偏移，清晰度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: red;
            font-size: 2em;
        }
        a:active{
            color: green;
        }
        .asd{
            text-shadow: red 10px 10px 3px;
        }

    </style>

</head>
<body>

    <a href="">
        <img src="../tupian/digeng.png" alt="">
    </a>
    
    <p>
        <a href="">大卫·科波菲尔</a>
    </p>

    <p>
        <a href="">作者：许安杰的引路人</a>
    </p>

    <p class="asd">
        售价：99元
    </p>


</body>
3.5列表

1.div划分模块

<div>...</div>

CSS代码：

#nav{
    width: 14em;
    background: darkgray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="xuexi.css">
</head>
<body>
<div id="nav">
    <p class="title">全部商品分类</p>

    <ul class="JS_navCtn cate_menu">
        <li>
            <a href="//shouji.jd.com/">手机</a>
            <a href="//wt.jd.com">运营商</a>
            <a href="//shuma.jd.com/">数码</a>
        </li>
        <li>
            <a href="//diannao.jd.com/">电脑</a>
            <a href="//bg.jd.com">办公</a>
        </li>
        <li>
            <a href="//channel.jd.com/home.html">家居</a>
            <a href="//channel.jd.com/furniture.html">家具</a>
            <a href="//jzjc.jd.com/">家装</a>
            <a href="//channel.jd.com/kitchenware.html">厨具</a>
        </li>
        <li>
            <a href="//channel.jd.com/1315-1342.html">男装</a>
            <a href="//channel.jd.com/1315-1343.html">女装</a>
            <a href="//phat.jd.com/10-156.html">童装</a>
            <a href="//channel.jd.com/1315-1345.html">内衣</a>
        </li>
    </ul>
</div>
</body>
</html>
3.7背景

（这星期时间有点匆忙，就只写到这里了。。。）

weixin_45947655
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
css第一个文字,纯CSS实现取字符串的第一个字符实现文字图标功能
weixin_42465140的博客
08-03 596
如何通过CSS实现文字图标/*图标样式*/.nav-icon-normal {width: 32px;height: 32px;line-height: 33px;display: inline-block;border-radius: 6px;background-color: #b3b4c5;vertical-align: middle;overflow: hidden;font-size: ...
【前端学习之HTML&CSS】-- CSS第一篇 -- 为网页添加样式
lc1852109的博客
03-13 434
本篇文章从HTML逐渐转到CSS中，css是为网页添加样式的语言，拥有很庞大的结构体系，我们将抽丝剥茧，从总体出发，先讲清楚样式的组成，再了解样式书写的位置，一步步出发，掌握样式的使用。
CSS第1篇，CSS之Sass中的Scss，Sass中的@mixin和@extend，使用详细（Sass中@mixin和@extend的区别，Scss中的@mixin和@extend）
weixin_65793170的博客
06-27 2320
@mixin用于定义可重用的代码块，可以在需要的地方进行调用，可以接受参数，而@extend用于将一个选择器的样式继承到另一个选择器上，避免重复编写相同的样式代码，可以处理选择器的嵌套关系；@mixin可以自定义属性，并且传参，但@extend不可以。
css div下第一个span,CSS之div和span标签
weixin_34233720的博客
08-03 6422
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。这两个东西，都是最最重要的“盒子”。1 2 中国主要城市3 4 北京5 ...
面试题CSS篇（一）
weixin_43526403的博客
03-01 3059
css面试题，自用
关于CSS（详细篇）
weixin_53342968的博客
02-09 3077
详细介绍了CSS的含义、属性、选择器等
css如何筛选第一个元素,css选择器怎么选取第几个元素
weixin_39909366的博客
08-03 1万+
css选择器选取第几个元素的方法：1、使用“first-child”选择器选取属于其父元素的首个子元素；2、使用“last-child”选择列表中的最后一个标签；3、使用“nth-child(3)”选择第3个标签等等。本文操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。css用选择器选取第几个元素？css怎么用选择器选取第几个元素？下面本篇文章来给大...
CSS-基础篇
热门推荐
rfalcon的博客
05-18 2万+
CSS基础部分自学笔记 内联样式 也称行内或行间样式，是在html标签上添加style属性来实现的 内部样式 在<style></style>标签内添加的样式，内部样式的代码可以复用、符合W3C标准，尽量让结构和样式分开处理 外部样式 <link rel="stylesheet" href=""> rel：指定资源跟页面的关系 href：资源的地址 @import url(./common.css); 这种方式有很多问题，不建议使用 颜色表示法 单词表示法
css 第二行换行,CSS换行详解
weixin_36155846的博客
08-03 1795
普通文本段落的换行案例说明：在实际应用中我们常遇到这样的问题，就是一段文本，有了明确的宽度，需要文本自动换行。(如下图)案例分析：上面两个图，没有使用任何排版的CSS属性，也就是默认情况下，块元素里的文本，达到边缘以后会自动换行。但是这里有个特例：就是内容全部为英文字母(没有单词句子，没有词和词之间的空格)，此时文本就不自动换行了(见下图)特殊情况：有时候你写的东东，默认情况下并不自动换行，这多半...
用CSS开发时髦的导航栏第二篇
10-30
在本文中，我们将探讨如何使用CSS和HTML列表来构建一个多级的导航栏，这是“用CSS开发时髦的导航栏第二篇”的主题。 首先，我们可以看到HTML结构采用的是无序列表（`<ul>`）来创建导航菜单。一级菜单的每个项目都是...
Html/Css(新手入门第一篇必看攻略)
09-28
下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS基础知识总结-新手入门篇
08-03
**CSS基础知识总结** ...这些基础知识构成了CSS的基础架构，理解和掌握它们是成为CSS高手的第一步。随着技能的深入，你还将学习更复杂的布局技术，如Flexbox和Grid，以及响应式设计，以适应不同设备和屏幕尺寸。
index:这是我的第一篇CSS工作
04-12
【标题】"这是我的第一篇CSS工作"指出的是一个初学者在进行CSS（层叠样式表）的学习和实践。CSS是网页设计中的一个重要部分，它用于控制网页元素的外观、布局和结构，使得网页设计更加美观和有组织。这篇工作可能是...
css第04天.pdf
10-11
本篇主要介绍了CSS3中的几个新特性，包括圆角边框、盒子阴影和文字阴影，以及浮动布局的相关知识。圆角边框通过`border-radius`属性实现，可使元素边框呈现圆角效果；盒子阴影使用`box-shadow`属性，能为元素添加...
css实现水滴效果图
yinge0508的博客
08-12 929
【代码】css实现水滴效果图。
前端JS/CSS静态资源公共库免费CDN加速汇总
Soujer的博客
08-14 85
晓杰开发前端经常用到的静态资源，特意收集了一些免费的静态资源公共库给服务器减少压力！加速网站加载速度！
CSS 伪类和伪元素
weixin_44152104的博客
08-12 1027
伪类是选择器的一种，它用于选择处于特定状态的元素。比如当它们是这一类型的第一个元素时（:first-child），或者是当鼠标指针悬浮在元素上面的时候（:hover）。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。伪类是以开头为冒号的关键字：:first-child。
关于 Lora中 Chirp Spread Spectrum(CSS)调制解调、发射接收以及同步估计的分析
最新发布
m0_64636251的博客
08-14 388
本文结合相关论文对CSS信号的数学形式、调制解调、发射接收以及同步估计做了全面分析，希望有助于更好地理解lora信号。
CSS教程初级篇：层叠样式表入门指南
第一种方式是链入外部样式表文件。你可以先建立一个外部样式表文件（.css），然后使用HTML的link对象将其链接到网页中。示例如下： ```html 文档标题 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值