CSS知识点

最新推荐文章于 2021-06-20 13:39:08 发布

tomorrow-001

最新推荐文章于 2021-06-20 13:39:08 发布

阅读量400

点赞数

分类专栏：前端文章标签： CSS 选择器优先级选择器鼠标效果伪类

本文链接：https://blog.csdn.net/weixin_39947101/article/details/77717803

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

CSS (Cascading Style Sheets) 层叠样式表或级联样式表，用于渲染HTML元素标签的样式，是一组格式设置规则，用于控制Web页面的外观

通过使用CSS，可将页面的内容与表现形式分离：页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分

CSS声明

属性:属性值

font-size:12px;

如何使用CSS

CSS 可以通过以下方式添加到HTML中:

行内(嵌入or内联)样式：在HTML元素中使用style 属性
内部样式表：在HTML文档头部 head 区域使用style 元素来包含CSS
外部引用：使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

行内样式

直接作用在HTML标签中

<h1 style="text-align:center;">居中对齐的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

内部样式表

style标签应该在head标签内部.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

链接（LINK ）外部样式表
导入（@import）外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">@import url(http://www.baidu.com/style.css);</style>
</head>

外部引用`link`与`@import`区别

link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

加载顺序的差别

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

兼容性的差别

@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题

使用dom控制样式时的差别

当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

@import可以在css中再次引入其他样式表

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red};

sub2.css
———————-
.myclass {color:blue}

这样写法，会对网站服务器产生过多的HTPP请求。以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用

选择器

CSS选择器分为

标签选择器（元素选择器）：以HTML标签的名字作为样式应用依据
类选择器：以标签的CLASS属性值作为依据
ID选择器：以标签的ID属性值作为依据

选择器取名规则：CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.

英文字母大写与小写 A-Z a-z
数字 0-9
连字号 -
下划线 _
冒号 :
句号 .

CSS选择符只能以字母开头.

标签选择器

P { color:red; font-family:"隶书"; font-size:24px;}

选择器：p{}

多个样式用分号隔开

类选择器

<style type="text/css">
  .red{ color:red; font-family:"隶书"; font-size:24px;}
</style>

使用标签的CLASS属性应用样式，如：

<H2 CLASS=“red”>……</H2>

ID选择器

为某一特定标签设置样式,使用ID选择器

<style type="text/css">
  #red{ color:red; font-family:"隶书"; font-size:24px;}
</style>

使用标签的ID属性应用样式，如

<h2 id="red" ></h2>

选择器优先级

如果对同一元素使用了三种选择器

<style type="text/css">
  h2{color:green;}
  .blue{color:blue;}
  #red { color:red; }
</style>

代码出现何种结果

<h2 id="red" class="blue"></h2>

行内样式>ID选择器>类选择器>标签选择器

特殊选择器

全局选择符匹配文档中的任意一个元素（可以星号省略），如：{color:#000}
复合：标签选择器可以和ID选择器、类选择器复合，如：P.aa{……}//CLASS为aa的P标记
组合：如果若干个选择器具有相同样式，则可以组合使用，如下：a, #dd, .ss{……}
嵌套：在某个选择器内再设置选择器，如：#di p a{……}//在ID为“di”的元素内的P标记里的a标记

常用属性

background-color定义背景颜色
background-image定义背景图片
background-repeat定义背景图片的重复方式
background-position定义背景图片的位置
background-attachment定义背景图片随滚动轴的移动方式
letter-spacing属性控制字母之间的距离
word-spacing属性控制文字间空格的距离
text-decoration属性定义文本是否有下划线
text-transform属性控制英文的大小写
text-align属性定义文本的对齐方式
text-indent属性定义文本首行的缩进
white-space属性定义文本与文档源代码的关系
font-family定义使用什么字体
font-size定义字体大小
font-style定义斜体字
font-variant定义小型的大写字体
font-weight定义字体的粗细
list-style-type属性定义列表的样式
list-style-image属性定义列表样式的图片
list-style-position属性定义列表样式的位置
list-style属性统一定义列表样式的几个属性
border-width属性定义边框的宽度
border-color属性定义边框的颜色
border-style属性定义边框的样式
border属性统一定义边框样式的几个属性

注：建议动手做示例练习

鼠标效果

cursor -- 定义鼠标样式

[ ,]*: 根据用户定义的资源显示
auto: 正常鼠标
crosshair: 十字鼠标
default: 默认鼠标
pointer: 点状鼠标
move: 移动鼠标
e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
text: 文字鼠标
wait: 等待鼠标
help: 求助鼠标
progress: 过程鼠标
inherit: 继承

注：建议动手做示例练习

边距属性

padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．

padding属性

padding：10px; 四边统一内边距
padding:10px 20px; 上下、左右内边距
padding:10px 20px 30px; 上、左右、下内边距
padding:10px 20px 30px 40px; 上、右、下、左内边距

可能取的值

length 规定具体单位记的内边距长度
% 基于父元素的宽度的内边距的长度
auto 浏览器计算内边距
inherit 规定应该从父元素继承内边距

浏览器兼容问题

所有浏览器都支持padding属性
任何版本IE都不支持属性值“inherit”

margin属性

margin:10px; 四边统一外边距
margin:10px 20px; 上下、左右外边距
margin:10px 20px 30px; 上、左右、下外边距
margin:10px 20px 30px 40px; 上、右、下、左外边距

常用网页顶格设置：margin:0;

可能取的值

length 规定具体单位记的外边距长度
% 基于父元素的宽度的外边距的长度
auto 浏览器计算外边距
inherit 规定应该从父元素继承外边距

浏览器兼容问题

所有浏览器都支持margin属性
任何版本IE都不支持属性值“inherit”

区别

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

伪类

CSS伪类是CSS选择符的一部分
伪类名称的大小写敏感敏感性依赖于文档的语言，在HTML文档中大小写不敏感，在xml文档中大小写敏感
伪类的英文为Pseudo-Classes

伪类可以用于文档状态的改变、动态的事件等，例如用户的鼠标点击某个元素、未被访问的链接

当用户鼠标移动到某个HTML元素上
离开HTML元素
点击HTML元素

常用伪类

:link

适用于未被用户访问过的链接，语法如下：

:link
a:link
a.class:link

示例

a:link
{
  color: red;
}

a.fontColor:link
{
  color:red;
}
/* --------匹配class属性值为fontColor的链接样式---------- */

:visited

适用于已被用户访问过的链接。语法示例同上(:link)

:hover

适用于光标（鼠标指针）指向一个元素，但此元素未被激活时。语法示例同上(:link)

:active

适用于一个元素被激活时的样式，例如鼠标在此元素的区域内按下但还没有释放时。语法示例同上(:link)

:focus

适用于已获取焦点的元素的样式，例如：表单的input输入框可以输入文字时、接受键盘事件时。语法示例同上(:link)

:first-child

匹配其它元素的第一个子元素，例如：一个div中包括多个p元素，匹配第一个p元素可使用:first-child伪类。语法如下：

:first-child
E:first-child
E1>E2:first-child

示例

<p>
    <code>可以匹配样式</code>
    <code>普通正常显示</code>
</p>

<code>不可以匹配样式</code>
<p>
    <h2>不可以匹配样式</h2>
    <code>不可以匹配样式</code>
    <code>普通正常显示</code>
</p>

<style type="text/css">
  p > code:first-child
  {
    color:lime;
    background:red;
  }

</style>

伪元素（伪对象）

CSS伪元素是CSS选择符的一部分
伪元素名称的大小写敏感敏感性依赖于文档的语言，在HTML文档中大小写不敏感，在xml文档中大小写敏感
伪元素的英文为Pseudo-Elements，由于伪元素表示的不是真正的元素，因此称为伪

常用的伪对象

::first-line定义段落的第一行
::first-letter定义段落的第一个字符
::before在元素的开始动态的插入内容
::after在元素的结尾动态的插入内容
::selection改变用户鼠标选择的内容的样式

示例

/* -------- ::first-line伪元素可以和块类元素（div、p）连用---------- */
p::first-line
{
  background:red;
  color:white;
}
/* -------- 首字母大写特效----------- */
p::first-letter
{
  font-size: 4em;
  font-weight: bold;
  border: 1px solid lightblue;
  margin-right: 8px;
}
/* -------- 用户鼠标已选择内容的样式--IE6、7、8 不支持--------- */
::selection
{
  color:lightblue;
  background:pink;
}

CSS注释

CSS注释的开始使用/*,结束使用*/

/* ----------文字样式开始---------- */
/* 梦之都白色12象素文字 */
.dreamduwhite12px
{
  color:white;
  font-size:12px;
}

/* 梦之都黑色16象素文字 */
.dreamdublack16px
{
  color:black;
  font-size:16px;
}
/* ----------文字样式结束---------- */

CSS 参考手册

tomorrow-001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识点

CSSCSS (Cascading Style Sheets) 层叠样式表或级联样式表，用于渲染HTML元素标签的样式，是一组格式设置规则，用于控制Web页面的外观通过使用CSS，可将页面的内容与表现形式分离：页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分CSS声明属性:属性值font-size:12px;如何使
复制链接

扫一扫