前端——CSS笔记1

只有我最优秀

已于 2023-12-18 19:58:02 修改

阅读量875

点赞数 21

文章标签：前端 css 笔记

于 2023-12-18 19:54:17 首次发布

本文链接：https://blog.csdn.net/qq_25499417/article/details/135070374

版权

CSS 模板

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {color:red;text-align:center;}

CSS 注释

CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p {
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

常见的 CSS 选择器

标签选择器：通过标配选择 HTML 元素。

/*选择所有p标签*/
p {
  color: blue;
}

类选择器： 通过class选择HTML 元素。

类选择器以 . 开头，后面跟着class的值。

/*选择class为abc的元素*/
.abc {
  background-color: yellow;
}

id选择器： 通过id选择 HTML 元素。

id选择器以 # 开头，后面跟着id名称。

/*选择id为runoob的元素*/
#runoob {
  width: 200px;
}

属性选择器： 通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

/*选择所有type属性为"text"的<input>元素*/
input[type="text"] {
  border: 1px solid gray;
}

后代选择器： 通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

/*选择所有在 <div> 元素内的 <p> 元素*/
div p {
  font-weight: bold;
}

插入CSS

外部样式表

每个页面头部使用标签链接到样式表。

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

内部样式表

使用

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

内联样式

在相关的标签内使用style属性。

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

CSS 背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

背景颜色

background-color 属性定义了元素的背景颜色.

body {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像.

body {background-image:url('paper.gif');}

背景图像 - 平铺与设置定位

background-repeat 属性定义了图片的平铺方向

background-position 属性改变图像在背景中的位置

body {
    background-image:url('gradient2.png');
    /*水平方向平铺 (repeat-x)*/
    /*垂直方向平铺 (repeat-y)*/
     /*不平铺 (no-repeat)*/
    background-repeat:repeat-x;
    background-position:right top;
}

CSS 文本

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

文本颜色

color 属性被用来设置文字的颜色。

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

text-align 属性是用来设置文本的水平对齐方式。

h1 {text-align:center;}
p.date {text-align:right;}
/*当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。*/
p.main {text-align:justify;}

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

/*删除链接的下划线*/
a {text-decoration:none;}

文本转换

text-transform 属性是用来指定在一个文本中的大写和小写字母。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

text-indent 属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

CSS 字体

属性	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

字体系列

font-family 属性设置文本的字体。

p{font-family:"宋体", Times, serif;}

字体样式

font-style 指定斜体文字的字体样式属性。

p.normal {font-style:normal;}
p.italic {font-style:italic;}/*斜体*/

字体大小

font-size 属性设置文本的大小。

/* 16px=1em */
body {font-size:100%;}
h1 {font-size:40px;}/*绝对大小*/
h2 {font-size:1.875em;}/*相对大小*/

CSS 链接

链接样式

链接的样式，可以用任何CSS属性。

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

CSS 列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

不同的列表项标记

list-style-type 属性指定列表项标记的类型是：

ul.a {list-style-type: circle;} /*空心圆*/
ul.b {list-style-type: square;}  /*正方形*/
ol.c {list-style-type: I;} /*罗马数字*/
ol.d {list-style-type: a;}/*小写字母*/
ol.e {list-style-type: none;}/*移除默认标记*/

作为列表项标记的图像

list-style-image 属性指定列表项标记的图像

ul {list-style-image: url('sqpurple.gif');}

CSS 表格

表格边框

border 属性指定CSS表格边框。

/*指定了一个表格的th和td元素的黑色边框*/
table, th, td {border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度。

/*设置100％的宽度，50像素的th元素的高度的表格*/
table {
	width:100%; 
} 
th {
	height:50px; 
}

表格文字对齐

text-align 属性设置表格中的文本水平对齐。

td {text-align:right;}

vertical-align 属性设置垂直对齐。

td {height:50px;vertical-align:bottom;}

只有我最优秀

关注

21
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
前端——CSS笔记1

学习安全的笔记
复制链接

扫一扫