CSS(1)__CSS基础

最新推荐文章于 2024-04-27 22:13:08 发布

Richard_xx

最新推荐文章于 2024-04-27 22:13:08 发布

阅读量416

点赞数 1

分类专栏： CSS 文章标签： html5 css 初学标签学习

本文链接：https://blog.csdn.net/richard_xx/article/details/75558834

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在上一个阶段的学习中,相信大家对H5的认识有了一个全新的提高,对标签的使用和了解也应该有了自己独到的认识.当然学海无涯,我们也只是刚刚开始而已.好,话不多说,开始我们的这一阶段的学习!!!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在学习CSS之前,我们需要了解两个非常重要的标签. 这两个标签将伴随我们H5学习的自始至终.甚至在今后的工作开发中,我们也难以离开它们,其重要程度不言而喻.

1、div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
CSS中你将知道，这两个东西，都是最最重要的“盒子”。

<div>
<h3>中国主要城市</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>

<div>
<h3>美国主要城市</h3>
<ul>
<li>纽约</li>
<li>洛杉矶</li>
<li>华盛顿</li>
<li>西雅图</li>
</ul>
</div>
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

行级元素（会自动换行）：<h1>-<h6>、<p>.<ul><li><ol><dl><div>
行内元素（不会换行）：img.<label>.input.span
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。
span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：
<p>
简介简介简介简介简介简介简介简介
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
div标签是最最重要的布局标签，至于class是什么意思
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="dongxi"></div>
</div>
<div class="footer"></div>
所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

2、什么是CSS?

- CSS是指层叠样式表
- CSS通常称为CSS样式表或者层叠样式表，主要用于设置HTML页面中的文本内容（字体，大小，对其方式等）、图片的外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式

3、HTML与CSS的关系

H5:HTML+CSS+JavaScript
- HTML结构层：负责从语义的角度搭建页面结构
- CSS样式层：负责从审美的角度美化页面
- JavaScript层：负责从交互的角度提升用户体验

4、如何编写CSS样式？

- 内联样式：标签中添加style属性
<p style=”color:red;”>235465876</p>
- 内嵌（内部）样式：在head标签中添加style标签
- 外部样式，外联样式，通过link标签引入css样式文件
<link rel="stylesheet" href="abc.css" type="text/css">
推荐使用，解决代码复用，便于修改，弱耦合
高内聚，低耦合，扩展性：对扩展开发，对修改关闭使用外部样式表，相对于内嵌和内部式，有以下优点：
 样式代码可以复用。一个外部CSS文件，可以被很多网页共用。
 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。
 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。
 注：优先级内联样式>内部样式>外部样式
补充：通过link设置网页的小图标
<link rel="shortcut icon" href="images/IMG_1020.JPG">

5、CSS选择器

每一条css样式定义由两部分组成，形式如下：

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

 选择器通常是您需要改变样式的 HTML 元素，如：<p>,<body>,<h1>等等
 每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以冒号隔开，每条声明语句以英文状态下的分号“;”结束。

CSS对大小写不敏感。CSS代码注释以/*开头，以*/结束。
例如：p{ text-align:center; /*内容居中*/color:black;}

1 通用选择器 *
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}

2标签选择器
标签选择器其实就是HTML代码中的标签，会匹配所有使用该标签的元素。如：
p{ background-color:yellow; }

3 类选择器
类选择器在css样式编码中是最常用到的，用于一组元素的样式,如:可以实现为“暴击”字体设置为红色。
.类选器名称{css样式代码;}

步骤：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>暴击</span>

第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="text">暴击</span>

第三步：设置类选器css样式，如下：
.text{color:red;}/*类前面要加入一个英文圆点*/

<h1>无尽之刃</h1>
<p>无尽之刃（Infinity Edge）是著名竞技类网游《英雄联盟》里的增加暴击几率和增加暴击伤害的装备。适合依赖于普通攻击的物理输出英雄选择的装备，该装备配合增加攻速暴击的装备（绿叉电刃火炮）效果更佳。</p>
<img src="wujin.png">

.就是类的符号。类的英语叫做class。
所谓的类，就是class属性，任何的标签都可以携带class属性。
class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：
<h3>我是一个h3啊</h3>
<h3 class="teshu">我是一个h3啊</h3>
<h3>我是一个h3啊</h3>
<p>我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
<p class="teshu">我是一个段落啊</p>
css里面用.来表示类：
.teshu{
color: red;
}

同一个标签，可能同时属于多个类，用空格隔开：
<h3 class="teshu zhongyao">我是一个h3啊</h3>
这样，这个h3就同时属于teshu类，也同时属于zhongyao类。

初学者常见的错误，就是写成了两个class：
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
所以要总结两条：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2）同一个标签可以同时携带多个类。

类的使用，能够决定一个人的css水平。
比如，我们现在要做一个页面：

段落1 字体+颜色
段落2 颜色+下划线
段落3 下划线+字体

方便的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：
<style type="text/css">
.lv{
color:green;
}
.da{
font-size: 60px;
}
.xian{
text-decoration: underline;
}
</style>
每个标签，就去选取自己想要的类：
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

也就是说：
1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

4 ID选择器
id 选择器，可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<p id="para1">Hello World!</p>
以下的样式规则应用于元素属性 id="para1":
#para1{text-align:center ;
color:red;}

到底用id还是用class？
答案：css中尽可能的用class，除非极特殊的情况可以用id。
原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

5、css高级选择器

1. 后代选择器
<style type="text/css">
.div1 p{
color:red;
}
</style>
空格就表示后代，.div1 p 就是.div1的后代所有的p。
强调一下，选择的是后代，不一定是儿子。
比如：
<div class="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>

能够被下面的选择器选择上：
.div1 p{
color:red;
}
所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。
下列代码中如果要改变div1中的li2的p的样式，如何设置？
<div class="div1">
<ul>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
<li class="li2">
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
<li>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</li>
</ul>
</div>

<div>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
空格可以多次出现。
.div1 .li2 p{
color:red;
}
就是.div1里面的后代.li2里面的p。

2 儿子选择器 >
div>p{
color:red;
}
div的儿子p。和div的后代p的截然不同。
能够选择：
<div>
<p>我是div的儿子</p>
</div>
不能选择：
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>

3 交集选择器

h3.special{
color:red;
}
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。

<h3>我是标题</h3>
<h3 class="special">我是标题</h3>
<p class="special">我是段落</p>
<p>我是段落</p>
交集选择器没有空格。所以有没有空格
Div.red 交集选择器
不等价于
div .red 后代选择器

4 并集选择器（组合选择器）

组合选择器：(多元素选择器)当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
h1,h2,h3,h4,h5,h6
{
color: red
}
上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。

通用选择器 * 标签选择器（元素选择器）P h1 ul 类选择器 . ID选择器：#
后代选择器空格儿子选择器 > 交集选择器：无并集选择器，

6 CSS 链接：伪类选择器

链接样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时悬停
a:active - 链接被点击的那一刻

a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}

Richard_xx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS(1)__CSS基础

在上一个阶段的学习中,相信大家对H5的认识有了一个全新的提高,对标签的使用和了解也应该有了自己独到的认识.当然学海无涯,我们也只是刚刚开始而已.好,话不多说,开始我们的这一阶段的学习!!!~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~在学
复制链接

扫一扫