高效学习css

最新推荐文章于 2024-07-19 15:50:46 发布

梦魇中

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量144

点赞数

分类专栏： java学习文章标签： css css3 html html5

本文链接：https://blog.csdn.net/ASDASDADF/article/details/108237628

版权

java学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css学习记录

什么是样式表

样式表（style sheet）是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在电子文档开始时，可以通过插入或者链接进行定义。

CSS介绍

层叠样式表 (Cascading Style Sheets).

css可以用来为网页创建样式表，通过样式
表可以对网页进行装饰。

所谓层叠，可以将整个网页想象成是一层
一层的结构，层次高的将会覆盖层次低的.

而css就可以分别为网页的各个层次设置样
式.

样式表的优点

速度快
可维护性
可访问性
可定制
一致性
可移植性

css的几种引入方式

直接在HTML标签中，使用style属性内嵌css样式（行内样式）
```
<table style="background:#F5FAFA" width="90%" class="table">
```

在html头部head部分内，使用style标签插入css样式（内部样式）

 <style type="text/css">

        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }

        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }

        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }

        table tr:nth-child(odd)
        {
            background: #fff;
        }

        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }

    </style>

使用@import引用外部CSS文件

<style type="text/css"> 
<!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style>

@import是CSS中指令，和其他CSS指令一样，写到页面的时候必须放在

css的基本语法

CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。

语法：

选择器 {样式名:样式值；样式名:样式值 ; }

标签之间的关系

祖先元素（直接或间接包含后代元素的元素）
后代元素（直接或间接被祖先元素包含的元素）
父元素（直接包含子元素的元素）
子元素（直接被父元素包含的元素）
兄弟元素（拥有相同父元素的元素）

选择器

概述：

选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式。

元素选择器

元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素。

语法：标签名 { }

类选择器

类选择器，可以根据元素的class属性值选取元素。

语法：.className { }

ID选择器

ID选择器，可以根据元素的id属性值选取元素。

语法：#id { }

复合选择器

复合选择器，可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

语法：选择器1选择器2{}

群组选择器

群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式

语法：选择器1,选择器2,选择器3 { }

通用选择器

通用选择器，可以同时选中页面中的所有元素。

语法：*{}

后代选择器

后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。

语法：祖先元素后代元素 { }

子元素选择器

子元素选择器可以给另一个元素的子元素设置样式

语法：父元素 > 子元素 {}

其他子元素选择器

:first-child 选择第一个子标签
:last-child 选择最后一个子标签
:nth-child 选择指定位置的子元素
:first-of-type :first-of-type :nth-of-type 选定指定类型的子元素。

兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素

语法:

查找后边一个兄弟元素：兄弟元素 + 兄弟元素{}

查找后边所有的兄弟元素：兄弟元素 ~ 兄弟元素{}

属性选择器

属性选择器可以挑选带有特殊属性的标签

语法:
[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名=“属性值”]*

伪类和伪元素

**概述：**有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态

正常链接： a:link
访问过的链接：a:visited（只能定义字体颜色）
鼠标滑过的链接： a:hover
正在点击的链接：a:active

否定伪类

否定伪类可以帮助我们选择不是其他东西的某件东西。

语法: :not(选择器){}

其它

首字母 :first-letter

首行 :first-line

获取焦点 :focus

指定元素前 :before

指定元素后 :after

选中的元素 ::selection

选择器的权重

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个
选择器选中。

比如：
body h1{}
h1{}

上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不
致那还好不会产生冲突，但是如果两个选择器设置的是同一个式，这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的式，
权重又是如何计算的呢？

权重的计算

不同的选择器有不同的权重值

内联样式：权重是 1000

id选择器：权重是 100

类、属性、伪类选择器：权重是 10

元素选择器：权重是 1

通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，比如上边的body
h1的权重是20，h1的权重是10，所以第一个选择器设置的样
式会优先显示

css继承性

就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式
同样也会被子元素继承。继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上，比如为父元素设置了字体颜色，子元素也会应用上相同的颜色，当然并不是所有的样式都会被继承，这一点我们讲到具体样式时，再去讨论。

文本格式化

为内容设置不同的样式

单位

**px：**如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。

**百分比：**也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px

**em：**em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色

在CSS中可以直接使用颜色的关键字来代表一种颜色.

17种颜色：

aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

十六进制颜色

用的最多的颜色是十六进制符号。一个颜色值，比如：#6600FF实际上包含了三组十六进制的数字。

上边的例子中66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。最后的颜色是由这些指定浓度的红绿蓝混合而成的

如果每一组数中的两个数字都相同，就可以把十六进制的数字缩短为只有3个字符，如将#6600FF缩短为#60F

RGB值

也可以使用计算机中常用的RGB值来表示颜色。可以使用0_{255的数值，也可以使用0%}100%的百分比数，RGB(100%,0%,0%)

RGBA

RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
RGBA(255,100,5,0.5)

字体

字体设置

通过font-family可以同时指定多个字体。

p{font-family:Arial , Helvetica , sans-serif}

如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。

字体的分类

serif（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体

cursive （草书字体）

fantasy （虚幻字体）

斜体和粗体

font-style用来指定文本的斜体

指定斜体：font-style:italic

指定非斜体：font-style:normal

font-weight用来指定文本的粗体

指定粗体：font-weight:bold

指定非粗体：font-weight:normal

小型大写字母

font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

font-variant:small-caps

字体属性的简写

font可以一次性同时设置多个字体的样式

语法：font:加粗斜体小型大写大小/行高字体

这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个

行间距

line-height用于设置行高，行高越大则行间距越大。

行间距 = line-height – font-size

大写化

text-transform样式用于将元素中的字母全都变成大小

大写：text-transform:uppercase

小写：text-tansform:lowercase

首字母大写：text-transform:capitalize

正常：text-transform:none

文本的修饰

text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。

可选值：

underline

overline

line-through

none

字母间距和单词间距

letter-spacing用来设置字符之间的间距

word-spacing用来设置单词之间的间距

这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离

对齐文本

text-align用于设置文本的对齐方式

可选值：

left：左对齐

right：右对齐

justify：两边对齐

center：居中对齐

首行缩进

text-indent用来设置首行缩进，该样式需要指定一个长度，并且只对第一行生效。

梦魇中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高效学习css

css学习记录什么是样式表样式表（style sheet）是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在电子文档开始时，可以通过插入或者链接进行定义。CSS介绍层叠样式表 (Cascading Style Sheets).css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的.而css就可以分别为网页的各个层次设置样式.样
复制链接

扫一扫