CSS

最新推荐文章于 2024-09-02 20:34:02 发布

伊木子曦

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量511

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Mouer__/article/details/115053190

版权

CSS

何为CSS
css语法
css使用
css颜色
盒子模型
css边框和边距
定位
选择器
伪类
伪元素

何为CSS

CSS 指的是层叠样式表(Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

css语法

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

说明：

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除标签元素选择器外，还有id和class选择器。
id 选择器适用范围只有一个元素。
元素的class值可以多个，也可以重复。

css使用

外部css

每张 HTML 页面必须在 head 部分的元素内包含对外部样式表文件的引用。
外部样式在 HTML 页面部分内的元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
</body>
</html>

内部css

内部样式在 HTML 页面的部分内的

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>heading</h1>
<p>paragraph.</p>

</body>
</html>

行内css

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">heading</h1>
<p style="color:red;">paragraph.</p>

</body>
</html>

多个样式表

当为某个 HTML 元素指定了多个样式时，优先级顺序：

行内样式（内联样式）
外部和内部样式
浏览器默认样式

css颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像


div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

css边框和边距

css 边框

css边框属性border,可指定元素边框的样式、宽度和颜色。
css边框样式border-style，可以设置一到四个值（用于上边框、右边框、下边框和左边框）允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
none - 定义无边框
hidden - 定义隐藏边框

css外边距

css外边距属性margin，为元素周围创建空间。
margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left
说明：将 margin 属性设置为 auto，使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

css内边距

css内边距属性padding,用于在任何定义的边界内的元素内容周围生成空间。
padding 属性是以下各内边距属性的简写属性：

padding-top
padding-right
padding-bottom
padding-left

提示：无论边框、内边距还是外边距，它们都有上下左右四个方向。

定位

position 属性指定了元素的定位类型。
五个不同的位置值：

static
relative
fixed
absolute
sticky
说明：元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位
静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动

relative 定位
相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

选择器

CSS 中有四种不同的组合器：

后代选择器 (空格) ：匹配属于指定元素后代的所有元素。
子选择器 (>) ：匹配属于指定元素子元素的所有元素。
相邻兄弟选择器 (+)：匹配所有作为指定元素的相邻同级的元素。
通用兄弟选择器 (~)：匹配属于指定元素的同级元素的所有元素。

伪类

语法

 selector:pseudo-class {property:value;}

实例

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类的名称不区分大小写。

匹配所有

元素中的第一个元素

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

lang 类为属性值为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

伪元素

语法

selector:pseudo-element {property:value;}

::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。
注意：::first-line 伪元素只能应用于块级元素

::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
注意：::first-letter 伪元素只适用于块级元素。

伪元素可以与 CSS 类结合使用，也可以组合几个伪元素。

::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。

::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。

::selection 伪元素
::selection 伪元素匹配用户选择的元素部分

伊木子曦

关注

0
点赞
踩
0

收藏

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

CSS何为CSScss语法css使用外部css内部css行内css多个样式表css颜色盒子模型css边框和边距css 边框css外边距css内边距定位何为CSSCSS 指的是层叠样式表(Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中css语法选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个
复制链接

扫一扫