CSS（初级）笔记

Yuyy

发布于 2022-09-19 09:51:36

1.1K0

发布于 2022-09-19 09:51:36

本文最后更新于 688 天前，其中的信息可能已经有所发展或是发生改变。

涵盖内容

1.熟悉css基本语法，以及css工作原理 2.熟练使用css selector 常规选择器class，id,元素，后代，通用，了解选择器的优先级 3.熟悉浮动，定位，盒模型，背景，字体，颜色等常用属性，能运用css进行页面布局和展现效果图

css的工作原理

css的出现使得内容和样式分离进而让页面变得更简洁，更容易维护。
mozilla开发者文档里是这样描述的：
- 浏览器在展现文档的时候，需要把文档内容和相应的样式信息结合起来展现。
- 浏览器先将HTML 和 CSS 转换成 DOM (文档对象模型)结构。这时 DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表
- 浏览器把 DOM 的内容展示出来

/*这是个注释*/

插入样式表的方法有三种:

外部样式表(External style sheet)

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

内部样式表(Internal style sheet)

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

内联样式(Inline style)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

line-height行高

text-align 对齐元素中的文本

font-family:"Times New Roman"

font-size font-style

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

链接样式

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

一个属性多个值

table, th, td
{
    border: 1px solid black;
}

盒子模型(Box Model)

边框-单独设置各边

p{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

CSS 轮廓（outline）

分组选择器

h1,h2,p
{
    color:green;
}

嵌套选择器

p.marked{
    text-decoration:underline;
}

max-hright

display:none;和visibility:hidden;

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

更改内联元素和块元素

display:inline;
display:block;

Position(定位)

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

relative 定位

相对定位元素的定位是相对其正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

h2.pos_left
{
    position:relative;
    left:-20px;
}

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

重叠的元素

z-index属性指定了一个元素的堆叠顺序
一个元素可以有正数或负数的堆叠顺序

overflow 属性用于控制内容溢出元素框时显示的方式。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

元素居中对齐

元素水平居中margin: auto;
文本水平居中text-align: center;
垂直居中 - 使用 line-height
垂直居中 - 使用 position 和 transform
- transform: translate(-50%, -50%);

组合选择符

后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有<p>元素插入到 <div>元素中:

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择了<div>元素中所有直接子元素<p>：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于<div> 元素后的第一个 <p>元素:

div+p
{
  background-color:yellow;
}

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
  background-color:yellow;
}

div~*：匹配全部

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-8-08 1，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度