CSS入门，常用样式

一、CSS简介

CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用来是一种描述 HTML 文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

示例：

/*选择器选择p标签*/
p{
    /*颜色的声明*/
    color:red;  /*属性：color 值：red*/
    /*字体大小的声明*/
    font-size:15px;
}

三、引入CSS样式的三种方式

内联（行内）样式：

写在标签的属性里面，直接使用

内部样式表：

样式写在<style></style>标签之间

外部样式表：

为一个独立的.css文件，需要通过<link href="路径"/>导入以便使用

基础选择器

标签选择器标签{各种样式}
类选择器 .类名{各种样式}
id选择器 #id号{各种样式}

字体样式（font）
font-weight bold定义粗体字符

100-900(粗细程度)

font-style字体风格 normal默认/italic斜体

font-family字体类型隶书、楷体等

font-size 字体大小

文本样式
color 设置文本的颜色

line-height 设置文本的行高

text-indent 设置首行文本缩进

text-align 设置元素水平对齐方式

left（左对齐） center（居中） right（右对齐）

text-decoration 设置文本的装饰

none：默认，标准文本

underline：定义文本下划线

overline：定义文本上划线

line-through：定义穿过文本的一条线

鼠标样式（cursor）

背景样式（background）
background-color 背景颜色

background-image:url（图片路径）背景图片地址

background-repeat 背景重复方式

no-repeat不重复 repeat-x水平重复 epeat-y垂直重复 repeat默认重复

background-position 背景定位

水平方向：left center right

垂直方向：top center bottom

background-size不能在缩写里设置

背景样式简写background：图片地址，图片重复方式，背景颜色，背景定位

列表样式（list-style）
list-style-type

list-style-image

list-style-position

列表样式简写list-style：列表标记属性，自定义列表标记图片，列表标记定位

CSS伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

如：button:hover { color: blue; }

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。
用法：标签:伪类{}

常用伪类有以下四个：

link（点击访问前） visited（单击访问后） hover 鼠标悬浮其上 active单击未释放

锚伪类

链接能够以不同的方式显示：

实例

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}


注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

实例

a.highlight:hover {
  color: #ff0000;
}

悬停在 <div> 上

在 <div> 元素上使用 :hover 伪类的实例：

实例

div:hover {
  background-color: blue;
}

CSS伪元素

而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。
用法：标签::伪元素{}

常用伪元素有以下两个：after(之后),before(之前)

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。

默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

下面举个例子，在CSS代码中插入：

<style type="text/css"> 
h1:after {content:url(logo.gif)} 
</style> <h1>标题内容</h1>

在显示时，标题内容后会插入一张图片。这就是伪元素:after的作用。
:after伪类的content还可以跟其它的参数

CSS - :first-child 伪类

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配首个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p> 元素：

实例

p:first-child {
  color: blue;
}

匹配所有 <p> 元素中的首个 <i> 元素

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

实例

p i:first-child {
  color: blue;
}

匹配所有首个 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

实例

p:first-child i {
  color: blue;
}

CSS - :lang 伪类

:lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

实例

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 q:lang(en) {
 quotes: "~" "~";
 }
 </style>
 </head>
 <body>
  
 <p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
  
 <p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p>
  
 </body>
 </html>

结果如图：

盒子模型

高级选择器

1、交集选择器
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格。

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

*/ div.one{}

2、并集选择器
多个选择器通过逗号连接而成

没有先后顺序

*/ h1,span,em{}

3、后代选择器
外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔

所有的后代(直接/间接的后代)

使用标签选择器、地选择器、类选择器没有先后顺序

*/div span{}

4、子元素选择器
通过>连接在一起而成

直接子代选择器(必须是直接自带)

*/div>h1{}

5、属性选择器
选取带有指定属性的元素

选取带有指定属性和值的元素

*/input[name]{}

layout（CSS布局）

1、标准文档流
块级元素
<h1> - <h6>、<p>、<div>、列表等

•总是在新行上开始，占据一整行
•高度，行高以及外边距和内边距都可控制
•宽度始终是与浏览器宽度一样，与内容无关
•它可以容纳内联元素和其他块元素
行内元素
<span>、<a>、<img>、<strong>等

•和其他元素都在一行上
•高，行高及外边距和内边距部分可改变
•宽度只与内容有关
•行内元素只能容纳文本或者其他行内元素
•不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用

display属性作用
控制元素的显示和隐藏

块级元素和内联（行内）元素的转变

none:设置元素不会被显示

inline：元素显示为行内元素

block：元素会被显示为块级元素

inline-block：行内块元素

定位流
position 定位属性：static(默认值，没有定位) fixed relative absolute
top：相对自身原来位置向顶部进行偏移

left: 相对自身原来位置向左侧进行偏移

right 相对自身原来位置向右侧进行偏移

bottom: 相对自身原来位置向底部进行偏移

1.fixed 固定定位

(1) 使用了固定定位的元素【会】脱离标准文档流宽度由文字撑开,原本位置被占领

(2) 基于【浏览器窗口】进行偏移

(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

2.relative 相对定位

(1) 使用了相对定位的元素【不会】脱离标准文档流

(2) 基于自身原来在网页的位置进行偏移

(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

3.absolute 绝对定位

(1) 使用了绝对定位的元素【会】脱离标准文档流

(2) 使用了绝对定位的元素以它最近的一个“已经的行为”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

z-index属性：调整元素定位时重叠层的上下位置,z-index值大的层位于其值小的层上方默认为0
浮动流
float：是css样式中的定位属性，用于设置标签对象的浮动布局。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

left元素向左浮动 right元素向右浮动 none默认值，元素不浮动

clear属性

none：默认值，允许浮动元素出现在两侧

left：在左侧不允许浮动元素

right：在右侧不允许浮动元素

both：在左、右两侧不允许浮动元素

overfloat属性

auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出内容

hidden：内容会被修剪，并且超出的内容是不可见的

visible：默认值。内容不会被修剪，会呈现在盒子之外

英文单词或数字写在div里时要设置word-break:break-all

补充：

/* 去掉标签默认边框 */

outline: none;

/* 去掉浏览器提供的默认样式 */

-webkit-appearance: none;

/* box-shadow:水平阴影距离垂直阴影距离阴影模糊距离阴影颜色 */

transition: linear 3s width; /*transition:匀速时间变化的属性 */

transform: scale(1.2); /*transform：scale(倍数) */

原文链接：

https://blog.csdn.net/weixin_53988377/article/details/125858313

https://blog.csdn.net/fuhanghang/article/details/124405220

https://www.laike.net/article-99-148366-0.html

https://www.cnblogs.com/soooos/articles/17391653.html

posted @ 2023-03-08 11:14 yinghualeihenmei 阅读(57) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CSS入门，常用样式

一、CSS简介

二、CSS语法

三、引入CSS样式的三种方式

内联（行内）样式：

外部样式表：

基础选择器

锚伪类

实例

伪类和 CSS 类

实例

悬停在 <div> 上

实例

CSS - :first-child 伪类

实例

匹配所有 <p> 元素中的首个 <i> 元素

实例

匹配所有首个 <p> 元素中的所有 <i> 元素

实例

CSS - :lang 伪类

实例

layout（CSS布局）

公告