CSS学习笔记

最新推荐文章于 2024-08-06 21:40:45 发布

小姐姐自己动

最新推荐文章于 2024-08-06 21:40:45 发布

阅读量56

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/sinat_50226758/article/details/116503737

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

根据菜鸟相关整理,仅用于自己学习

background背景

background-color
- body {background-color:#b0c4de;}
background-image
- body {background-image:url(‘bgdesert.jpg’);}
background-repeat
- body
  {
  background-image:url(‘gradient2.png’);
  background-repeat:repeat-x;
  
  <–! no-repeat–>
  
  }
background-position

文本

颜色color
- body {color:red;}
- h1 {color:#00ff00;}
- h2 {color:rgb(255,0,0);}
对齐方式text-align
- h1 {text-align:center;}
- p.date {text-align:right;}
- p.main {text-align:justify;}
- 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
文本修饰
- a {text-decoration:none;}
- h1 {text-decoration:overline;}
- h2 {text-decoration:line-through;}
- h3 {text-decoration:underline;}
文本转换
- p.uppercase {text-transform:uppercase;}
- p.lowercase {text-transform:lowercase;}
- p.capitalize {text-transform:capitalize;}首字母大写
文本缩进
- p {text-indent:50px;}

字体font

字体样式style
- p.normal {font-style:normal;}正常
- p.italic {font-style:italic;}斜体
字体大小size
- h1 {font-size:40px;}
- h2 {font-size:30px;}
- p {font-size:14px;}
- 用em来设置字体大小
- h1 {font-size:2.5em;} /* 40px/16=2.5em */
- h2 {font-size:1.875em;}
- p {font-size:0.875em;}

链接

链接样式
- a:link {color:#000000;} /* 未访问链接*/
- a:visited {color:#00FF00;} / *已访问链接 */
- a:hover {color:#FF00FF;} / *鼠标移动到链接上 */
- a:active {color:#0000FF;} / *鼠标点击时 */
- 必须严格按照顺序执行:
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
对链接进行文本修饰
- a:link {text-decoration:none;}
- a:visited {text-decoration:none;}
- a:hover {text-decoration:underline;}
- a:active {text-decoration:underline;}
对链接背景颜色进行修饰
- a:link {background-color:#B2FF99;}
- a:visited {background-color:#FFFF85;}
- a:hover {background-color:#FF704D;}
- a:active {background-color:#FF704D;}

列表

不同的列表项标记
- ul.a {list-style-type: circle;}圆
- ul.b {list-style-type: square;}方块
- ol.c {list-style-type: upper-roman;}罗马数字
- ol.d {list-style-type: lower-alpha;}小写字母
自定义标记
- ul { list-style-image: url(‘sqpurple.gif’); }

表格

边框

th和td元素有独立的边界,所以默认呈现双边框

border-collapse属性折叠为单边框

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<p><b>注意：</b> 如果没有指定 !DOCTYPE  border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>

</body>

表格宽度和高度

Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

text-align属性设置水平对齐方式，向左，右，或中心：
td
{
    text-align:right;
}

垂直对齐属性设置垂直对齐，比如顶部，底部或中间
td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
```
td
{
    padding:15px;
}
```

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

边框border

边框样式border-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
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;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

边框宽度
- border-width:
边框颜色
- border-color

边框单独设置各边

	border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;

轮廓outline

加轮廓 outline:green dotted thick;

设置轮廓样式

<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>

设置轮廓颜色
- outline-color:#00ff00;
设置轮廓宽度
- outline-width:thin;

外边距margin和填充padding

margin:100px
- margin-top:
padding:20px
- padding-right:

分组和嵌套选择器

嵌套
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
分组
```
h1,h2,p
{
    color:green;
}
```

显示

隐藏
- visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间

块和内联元素

块元素例子

<h1>
<p>
<div>

内联元素例子

<span>
<a>

<style>
li{display:inline;}
</style>
</head>
<body>

<p>链接列表水平显示：</p>

<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>

演示结果

在这里插入图片描述

<style>
span
{
	display:block;
}
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

演示结果

在这里插入图片描述

定位position

static默认定位
fixed
- 元素的位置相对于浏览器窗口是固定位置。
  
  即使窗口是滚动的它也不会移动：
```
p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}
```

relative

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

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

在这里插入图片描述

absolute
- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
```
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
```
sticky
- 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
  
  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
```
div.sticky {
    position: sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}
```
重叠的元素
- z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
  
  一个元素可以有正数或负数的堆叠顺序,具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
```
img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
```

溢出处理overflow

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

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

浮动float

float:right;float:left;…

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。
彼此相邻的浮动元素:把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
清除浮动 - 使用 clear:clear 属性指定元素两侧不能出现浮动元素

对齐

元素居中对齐

margin:auto(如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用)
文本居中对齐

text-align: center;
图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:
```
img {
    display: block;
    margin: auto;
    width: 40%;
}
```

左右对齐

使用绝对定位的方式

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

提示:当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

使用float

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}
.img1 {
    float: right;
}
.clearfix {
    overflow: auto;
}
.img2 {
    float: right;
}
</style>
</head>
<body>
<p>以下实例图在父元素中溢出，很不美观:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
菜鸟教程 - 学的不仅是技术，更是梦想！！！</div>
<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
菜鸟教程 - 学的不仅是技术，更是梦想！！！</div>
</body>

在这里插入图片描述

使用 padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

使用line-height

通过设置line-height和height的值相等实现居中
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

圆角

<--!指定背景颜色的元素圆角：-->
#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
<--1指定边框的元素圆角:-->
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
<--!指定背景图片的元素圆角:-->
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

小姐姐自己动

关注

0
点赞
踩
0

收藏

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

background背景background-colorbody {background-color:#b0c4de;}background-imagebody {background-image:url(‘bgdesert.jpg’);}background-repeatbody{background-image:url(‘gradient2.png’);background-repeat:repeat-x;<–! no-repeat–>}
复制链接

扫一扫