CSS学习笔记

最新推荐文章于 2024-07-09 15:49:17 发布

蛋挞菌

最新推荐文章于 2024-07-09 15:49:17 发布

阅读量62

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/jing__jun/article/details/107161801

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:h1 {color:blue;font-size:12px;}
CSS注释以"/*" 开始, 以 "*/" 结束
在HTML元素中设置CSS样式，需要在元素中设置"id" 和 “class"选择器；HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 “#” 来定义(ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用)。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”."号显示。
插入样式表的方法有三种:
外部样式表：样式需要应用于很多页面，可以在任何文本编辑器中进行编辑，不能包含任何的 html 标签，应该以 .css 扩展名进行保存。链接：<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表：单个文档需要特殊样式，使用<style>标签在文档头部定义内部样式表。
内联样式：和内容混杂在一起，
多重样式优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
CSS背景
颜色：background-colorbody {background-color:#b0c4de;}
图像：background-imagebody {background-image:url('1.jpg');}
背景图像水平或垂直平铺： background-repeat body {background-image:url('1.jpg'); background-repeat:repeat-x;} background-repeat:no-repeat; 不平铺
改变图像在背景中的位置：background-position

简写属性：body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为:color;image;repeat;attachment;position

text-align:center/left/right/justify;
text-transform:uppercase/lowercase/capitalize;字句变为大写字母/小写字母/首字母大写
text-indent:50px;文本缩进50
word-spacing:30px;增加空白空间
字体
font-family:“Times New Roman”;
font-style:normal/italic/onlique;
font-size:40px;
CSS链接

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

列表样式
list-style-type:circle;
list-style-image:url(’.jpg’);
表格

折叠边框

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

表格宽度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字水平对齐

td
{
    text-align:right;
}

表格文字垂直对齐

td
{
    vertical-align:bottom;
}

盒子模型
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

Border(边框）
border-style属性用来定义边框的样式。
border-width 属性为边框指定宽度。（指定长度值，或三个关键字： thick 、medium（默认值）和 thin）
border-color属性为边框指定颜色。

border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

边框简写：border:5px solid red;

p.none {border-style:none;}无边框
p.dotted {border-style:dotted;}虚线边框
p.dashed {border-style:dashed;}虚线边框
p.solid {border-style:solid;}实线边框
p.double {border-style:double;}双边框
p.groove {border-style:groove;}凹槽边框
p.ridge {border-style:ridge;}垄状边框
p.inset {border-style:inset;}嵌入边框
p.outset {border-style:outset;}外凸边框
p.hidden {border-style:hidden;}隐藏边框

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

"border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}
"border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。

p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
单独设置各边

轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
外边距

p.margin
{
	margin-top:50px;
	margin-bottom:50px;
	margin-right:100px;
	margin-left:10px;
}

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px

margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px

margin:25px 50px;
上下边距为25px
左右边距为50px

margin:25px;
所有的4个边距都是25px

填充
定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;

上下填充为25px
左右填充为50px
padding:25px;

所有的填充都是25px

分组和嵌套

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

h1,h2,p
{
    color:green;
}

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

尺寸
控制元素的高度和宽度，增加行间距。

21.Display和Visibility
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
h1 {visibility:hidden;}隐藏但仍然存在
h1 {display:none;}不再存在

Position
position 属性指定了元素的定位类型。
position 属性的五个值：
static HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
relative 相对定位元素的定位是相对其正常位置。h2.pos_left { position:relative; left:-20px; }
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
Overflow

注意:overflow 属性只工作于指定高度的块元素上。

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

Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
水平&垂直对齐
元素居中对齐：可以使用 margin: auto;
文本居中对齐：text-align: center;
图片居中对齐：要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中。

img {
    display: block;
    margin: auto;
    width: 40%;
}

垂直居中对齐 - 使用 padding
26. 组合选择符

包含了四种组合方式:

后代选择器(以空格分隔)：选取某元素的后代元素。
子元素选择器(以大于号分隔）：只能选择作为某元素子元素的元素。
相邻兄弟选择器（以加号分隔）：选择紧接在另一元素后的元素，且二者有相同父元素。
普通兄弟选择器（以破折号分隔）：后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div p
{
  background-color:yellow;
}

div>p
{
  background-color:yellow;
}

div+p
{
  background-color:yellow;
}

div~p
{
  background-color:yellow;
}

伪类

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

伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

first-child 伪类
1、匹配第一个 <p> 元素
p:first-child
{
    color:blue;
}

2、匹配所有<p> 元素中的第一个 <i> 元素
p > i:first-child
{
    color:blue;
}

3、匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
p:first-child i
{
    color:blue;
}

伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。注意："first-line" 伪元素只能用于块级元素。
p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

"first-letter" 伪元素用于向文本的首字母设置特殊样式，注意："first-line" 伪元素只能用于块级元素。
p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

伪元素可以结合CSS类： 使所有 class 为 article 的段落的首字母变为红色。
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>

":before" 伪元素可以在元素的内容前面插入新内容。实例：在每个 <h1>元素前面插入一幅图片：
h1:before 
{
    content:url(.jpg);
}

":after" 伪元素可以在元素的内容之后插入新内容。实例:在每个 <h1> 元素后面插入一幅图片：
h1:after
{
    content:url(.jpg);
}

background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
属性选择器

把包含标题（title）的所有元素变为蓝色：
[title]
{
    color:blue;
}

包含指定值的title属性的元素样式，使用（~）分隔属性和值:
[title~=hello] { color:blue; }

表单样式
属性选择器样式无需使用class或id的形式:
input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

使用 :focus 选择器可以设置输入框在获取焦点时的样式
input[type=text]:focus {
  background-color: lightblue;
}

计数器

vCSS 计数器使用到以下几个属性：
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

蛋挞菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:h1 {color:blue;font-size:12px;}CSS注释以"/*" 开始, 以 "*/" 结束在HTML元素中设置CSS样式，需要在元素中设置"id" 和 “class"选择器；HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 “#” 来定义(ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用)。class 选择器在HTML中以class属性表示, 在 CS..
复制链接

扫一扫