css基础总结

最新推荐文章于 2021-01-17 19:24:29 发布

^果然好^

最新推荐文章于 2021-01-17 19:24:29 发布

阅读量186

点赞数

分类专栏： # div+css+js

本文链接：https://blog.csdn.net/allensandy/article/details/90229549

版权

div+css+js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考：https://www.runoob.com/css/css-tutorial.html

css引用

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

id 和 class

#para1
{
	text-align:center;
	color:red;
}
<p id="para1">Hello World!</p>

-------------------------------------------
.center
{
	text-align:center;
}
<p class="center">段落居中</p>

ul li 列表样式

ul.a {
   list-style-type:circle;
}

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

----------------------------
去点点
ul{
      li {
                list-style-type:none;
            }
        }

table 样式

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

<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>

首行缩进

text-indent:50px;

border样式

border-style:solid;
-----------------------------
<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>

css分组

为了尽量减少代码，你可以使用分组选择器，每个选择器用逗号分隔。
h1,h2,p
{
	color:green;
}

css尺寸

height:100px

line-height:100%; 行高

css隐藏

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间

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


display:none;

visibility:hidden;

css显示

Display - 块和内联元素
就是行和块之间的转换
li {display:inline;}
span {display:block;}

position绝对定位

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

static  （默认情况，存在文档流当中）
relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 
         relative 或者 absolute 定位元素）
fixed   （绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，
         怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）

css 内容溢出

overflow: visible;

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

css浮动

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

float:left;

css布局

元素居中对齐   margin: auto

例如： width: 350px;
      margin: 0 auto;

啥是元素：如<div>；注意: 如果没有设置 width 属性(或者设置 100%，即不能设置成100%)，居中对齐将不起作用。

-------------------------------------------------------------------------------
文本居中对齐  text-align: center

文本在元素内居中对齐

-------------------------------------------------------------------------------
图片剧中对齐   margin: auto

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中

-------------------------------------------------------------------------------
左右对齐 - 使用定位方式  position: absolute

.right {
    position: absolute;
    right: 0px;
}
注意: 当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。


-------------------------------------------------------------------------------
左右对齐 -  float: right;

使用 float 方式

-------------------------------------------------------------------------------
垂直居中  - padding: 70px 0;

padding: 70px 0;

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

-------------------------------------------------------------------------------
垂直居中  - line-height
.center {
    line-height: 200px;
    height: 200px;
}
<div class="center">test</div>

-------------------------------------------------------------------------------
垂直居中  - transform

transform 旋转属性  注意: IE8 及更早版本不支持 transform 属性。

transform: translate(-50%, -50%);

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

常用，后代选择器(以空格分隔)：
div p
{
	background-color:yellow;
}

css导航栏

ul
{
	list-style-type:none; --去掉li前面的点点
	margin:0;
	padding:0;
}
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>


ul
{
    list-style-type:none; 
    margin:0;
    padding:0;
}
li
{
    display:inline;  -- 块元素变成行元素
}
<ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>

还有其他的丰富的导航栏：https://www.runoob.com/css/css-navbar.html

还有其他的丰富的导航栏：https://www.runoob.com/css/css-navbar.html

css hsla(0, 9%, 81%, 0.3)

带透明颜色

background: hsla(0, 9%, 81%, 0.3);

H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。

S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高

L是亮度，也是一个百分比值，取值在0%~100%，0%最暗，100%最亮。

A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。

分隔线