CSS

最新推荐文章于 2024-03-16 16:59:41 发布

zs1342084776

最新推荐文章于 2024-03-16 16:59:41 发布

阅读量189

点赞数

分类专栏： Html 文章标签： CSS

本文链接：https://blog.csdn.net/zs1342084776/article/details/85249085

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<1>CSS：层叠样式表

CSS具有对网页的布局，颜色，背景，宽度，高度，字体进行控制，

让网页按照您的美工设计布局的更加美观漂亮

样式开始最常见的是：*号，这里的“*”号是通配符，指网页html中所有标签的意思。

在*号定义的属性，一般是设置页面一些固定的属性

*{
   margin: 0px;
   padding: 0px;
    }

<2>常见的CSS样式：

1)边框

1.1)Border边框样式的参数：

solid: 实线边框 none: 无边框 dotted: 边框为点线

dashed: 边框为长短线 double:边框为实线

groove: 根据border-color的值画3D凹槽

ridge: 根据border-color的值画菱形边框

inset: 根据border-color的值画3D凹边

outset: 根据border-color的值画3D凸边

1.2)Border四个边框

border-left ：设置左边框，一般单独设置左边框样式使用

border-right ：设置右边框，一般单独设置右边框样式使用

border-top ：设置上边框，一般单独设置上边框样式使用

border-bottom：设置下边框

border-radius: 倒圆角

（1）border-radius的值可以为绝对单位px,相对单位em,rem

（2）可以设置单个角的弧度：

border-top-right-radius:5px；

border-bottom-left-radius:5px

在开发中我们一般这样写CSS边框，优化简写，

常见对对象设置使用属性代码：border:1px solid #blue;

1.3)box-shadow：阴影

box-shadow:  X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色

X轴和Y轴的偏移值可以为负值，但是不能共用一个，

X轴和Y轴的阴影半径可以共用一个，但是不能为负值

阴影半径是可以不写的，但是失去了模糊的效果，立体感减弱，一般不会使用

1.4) box-sizing:属性允许你以特定的方式定义匹配某个区域的特定元素

box-sizing:content-box/border-box/inherit

content-box:宽高的值为content的宽高

border-box: 宽高的值为border+padding+content，也就是盒模型的宽高

inherit: 父元素继承box-sizing的值

2) 盒子模型（Box Model）:

Html中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，

从外向里依次是：margin(外边距) Border(边框) padding(内边距) content(内容)

2.1) margin:盒子的外边距，即盒子与盒子之间的距离

margin-top:对象上边外延距离；

margin-bottom:对象下边外延距离

margin-left:对象左边外延距离；

margin-right: 对象右边外延边距

margin可以写一个值，也可以写两个，三个，四个

margin: 24px 上下左右都是24px

margin: 24px auto 上下24px, 左右自动

margin: 24px auto 10px 上边距：24px, 左右自动，下边距：10px

当此属性为4个值的时候，就是具体到上边距，下边距，左边距，右边距

蓝色部分旁边的黄色部分是元素的margin值

2.2)padding:内边距，盒子与盒子内部元素的距离

padding-top:10px; 上边框留空白

padding-right:10px; 右边框留空白

padding-bottom:10px; 下边框留空白

padding-left:10px; 左边框留空白

2.3)content:属性与 :before 及 :after 伪元素配合使用，来插入生成内容

2.3.1）:after 在元素内容之后插入内容

h1:after {content:url(/i/w3school_logo_white.gif)}

结果：

2.3.2）:before在元素内容之后插入内容

h1:before{content:url(/i/w3school_logo_white.gif)}

<!DOCTYPE html>
<html>
<head>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>

<body>
<p><a href="http://www.runoob.com">菜鸟教程</a> - 免费的编程学习网站。</p>
<p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
</body>
</html>

3) background：设置背景

3.1)background-image:

可以为一个元素添加多张图片，写在前面的背景图会在上面

3.2)background-size:

调整背景图片的大小

background-size:60px 100px 宽高

background-size:cover 将图片缩放到正好完全覆盖定义背景的区域。

3.3)background-position:

设置背景图像的位置，如果未设定，图像会被放在元素的左上角

left top: 默认 right bottom

3.4)background-repeat:

设置是否及如何重复背景图像，默认的背景图像在水平和垂直方向上重复

repeat: 默认，背景图片向水平、垂直两个方向上平铺

repeat-x：使图片只在水平方向上平铺。

repeat-y：死图片只在垂直方向上平铺。

no-repeat：不重复平铺背景图片。

inherit：规定应该从父元素继承 background-repeat 属性的设置。

3.5)background-attachment:

fixed: 网页滚动时，背景图片相对于浏览器的窗口而言，固定不动

scroll: 网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

3.6)background-origin: 规定背景图片的定位区域

下图中，黄色是padding+content, 绿色是border

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid green;
    padding: 20px;
    background-image: url(img/bg_flower.gif);
    background-repeat: no-repeat;
}
.box1{
    background-origin:content-box;
}
.box2{

    background-origin:padding-box;
}
.box3{
    background-origin:border-box;
}

3.7）background-clip: 规定背景的绘制区域

<div class="box1">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box2">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box3">啦啦啦啦，德玛西亚。啦啦啦啦，剑圣偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不


div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.box1{
    background-clip:content-box;
}
.box2{

    background-clip:padding-box;
}
.box3{
    background-clip:border-box;
}

3.8)linear-gradient: 背景的颜色渐变（IE 10）

渐变(gradient)是由浏览器生成的，颜色可以用多种表现形式，

包括带有透明度的raba()形式。

渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡，

你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），

你可以减少下载的事件和宽带的使用。

3.8.1）线性渐变

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>


div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{    // 1、属性值最少为两种颜色 
    background: -webkit-linear-gradient(red, yellow);  //Safari 5.1 - 6.0 
    background: -o-linear-gradient(red, yellow);   // Opera 11.1 - 12.0 
    background: -moz-linear-gradient(red, yellow); // Firefox 3.6 - 15 
    background: linear-gradient(red, yellow);     // 标准的语法
      }
.box2{   //2、可以设置颜色渐变的方向，比如从左到右 
    background: -webkit-linear-gradient(left, green , yellow); 
    background: -o-linear-gradient(left, green, yellow); 
    background: -moz-linear-gradient(left, green, yellow); 
    background: linear-gradient(left, green , yellow);
}
.box3{   //3、也可以沿着对角的方向渐变 
   background: -webkit-linear-gradient(top left, blue , yellow); 
   background: -o-linear-gradient(top left, blue, yellow); 
   background: -moz-linear-gradient(top left, blue, yellow); 
   background: linear-gradient(top left, blue , yellow); 
}
.box4{  //4、或者，我们直接用角度确定渐变的方向（12点钟方向为0deg） 
   background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
   background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
   background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
   background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
}
.box5{  // 5、我们也可以定义多种颜色的渐变，之前的方向的设置方法不变 
      background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); 
}
.box6{  // 6、当然，渐变可以是很多次的 
      background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);
      background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: repeating-linear-gradient(red, red 10%, yellow 20%); 
}

3.8.2)径向渐变

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>


div{
    float:left;
    margin:30px;
    width: 150px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{  //1、颜色结点均匀分布（默认情况下 
    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 标准的语法 */
            }
.box2{  // 2、当然，对于颜色发辐射界限，我们也可以进行设置 
    background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -o-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: radial-gradient(red 5%, yellow 15%, green 60%); 
}
.box3{  //3、shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。            默认值是 ellipse。*/
    background: -webkit-radial-gradient(circle, red, yellow, green); 
    background: -o-radial-gradient(circle, red, yellow, green); 
    background: -moz-radial-gradient(circle, red, yellow, green); 
    background: radial-gradient(circle, red, yellow, green); 
            }
.box4{  // 4、size 参数定义了渐变的大小。它可以是以下四个值：closest-side farthest-side closest-corner                 farthest-corner，具体的不同大家可以自己尝试，这里只展示一种情况 
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
.box5{   // 5、当然，也是有重复渐变这种情况
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

<3>文本

1）text-shadow文本阴影

text-shadow: X轴偏移值， Y轴偏移值，阴影模糊半径， 颜色

2)word-wrap | word-break 是否允许长单词换行，这两个可以一起使用

2.1)word-wrap:

normal: 只允许断点字换行

break-word:如果单词过长，截断强制换行

2.2)word-break:

normal: 浏览器默认的换行行为，一般是不允许长单词内部换行

break-all：允许在单词内换行

keep-all: 只能在半角空格或连字符处换行

<div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>


div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.5;
}
.box1{
    word-wrap: normal;
}
.box2{
    word-wrap: break-word;
}
.box3{
    word-break: keep-all;
}
.box4{
    word-break: break-all;
}

<4>float:常跟属性值left, right, none

float: none 不使用浮动

float: left 靠左浮动

float: right 靠右浮动

清除浮动：clear:none|left|right|both

<5>text-decoration: 参数改变浏览器显示文字链接时的下划线

参数取值范围：

underline: 为文字家下划线

overline: 为文字加上划线

line-through: 为文字加删除线

blink: 使文字闪烁

none: 不显示上述任何效果

<6>position属性

static:默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

absolute: 绝对定位，相对于static定位以外的第一个父元素进行的定位

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed: 绝对定位，相对于浏览器窗口进行定位

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative：相对定位，相对于其正常位置进行定位，

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

inherit: 规定应该从父元素继承 position属性的值

<7>z-index:

在使用绝对定位 position:absolute属性条件下使用才能使用。

通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性

z-index的数值不跟单位。不用加上px.

z-index的数字越高越靠前，并且值必须为整数，如果两个div一起重叠，

这时设置你想要的div，可以将那个div的z-index设置大一点，这样就可以覆盖之前那个

<8>字体属性

1）color: 加上颜色

2) font-size: 20px

3) font-family: 规定元素的字体系列

用于某个元素的字体族名称或/及类族名称的一个优先表。

如果浏览器不支持第一个字体，则会尝试下一个

有两种类型的字体系列名称：

3.1）指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。

3.2）通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

4) font-weight:

bold(粗体) lighter;(细体) normal;(正常)，设置数字也是可以的 (100px,200px)

5) font-style:

oblique;(偏斜体) italic;(斜体) normal;(正常)

6） line-height: normal(正常)

line-height：50px; div的高度也是五十，这样你的内容结束平行居中

<9>区块

1）单词间距：

word-spacing: 间隔距离

2）字母间距：

letter-spacing: 字母距离

3）文本对齐：

text-align:

left：左对齐 right: 右对齐

center:居中对齐 justify: 相对左右对齐

4）垂直对齐：

vertical-align:

top:顶对齐 bottom: 底对齐

text-top: 相对文本顶对齐 text-bottom: 相对文本底对齐

baseline: 基准线对齐 middle: 中心对齐

sub: 以下标的形式显示 super: 以上标的形式显示

5）文本缩进

text-indent: 缩进距离

12px相当于一个文字距离

6）空格

white-space:

normal 正常 pre 保留 nowrap 不换行

7) 显示样式

display:

block：块级元素，在对象前后都换行

inline：在对象前后都不换行

list-item：在对象前后都换行，增加了项目符号

none：无显示

<10> div 和 span的区别：

1)两者都是用来划分区域的，

div是块级元素，不会与其他元素在同一行

span是内联元素，可以与其他元素位于同一行

2) span标签是不能改变大小的，span占用的是内容有多宽就占用多宽的空间距离，

如果想把span标签的大小想改掉就必须把它变为块级元素 display:inline-block;

块级元素有：div p form ul ol li ......

行内元素有：span img a......

zs1342084776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

&lt;1&gt;CSS：层叠样式表 CSS具有对网页的布局，颜色，背景，宽度，高度，字体进行控制，让网页按照您的美工设计布局的更加美观漂亮样式开始最常见的是：*号，这里的“*”号是通配符，指网页html中所有标签的意思。在*号定义的属性，一般是设置页面一些固定的属性*{ margin: 0px; padding: 0px;...
复制链接

扫一扫