CSS基础样式属性设置

最新推荐文章于 2024-03-16 20:05:58 发布
最新推荐文章于 2024-03-16 20:05:58 发布
阅读量1.5k 收藏 25
点赞数 2
分类专栏： 前端学习笔记 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44621343/article/details/114550340
版权

文章目录

css基础样式与属性设置

一、宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定(行内标签无法设置宽度，设置了也不会生效)。

/*块级标签才能设置宽度*/
p {
    background-color: red;
    height: 200px;
    width: 400px;
}

/*内联标签的宽度由内容来决定。(行内标签无法设置长宽 就算你写了 也不会生效)*/
span {
    background-color: green;
    height: 200px;
    width: 400px;
}

二、字体属性

1. font-family：文字字体

body {
    /*font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。(第一个字体不生效会使用下一个字体。 依此类推)*/
    /*SimSun 宋体
    KaiTi  楷体
    SimHei 黑体*/
    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
}

常见字体：
serif 衬线字体
sans-serif 非衬线字体
中文：宋体，微软雅黑，黑体

注意：
    1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
    2、如果取值为中文，需要用单或双引号扩起来

2.font-size:字体大小

了解：Chrome浏览器上默认字体大小16px

p {
    font-size: 24px;
}

注意：
1、通过font-size设置文字大小一定要带单位，即一定要写px

2、如果设置成inherit表示继承父元素的字体大小值。

3.font-weight：文字粗细

取值描述
normal默认值，标准粗细
bord粗体
border更粗
lighter更细
100~900设置具体粗细，400等同于normal，而700等同于bold
inherit继承父元素字体的粗细值

4.font-style：文字风格

normal 正常，默认就是正常的
italic 倾斜

5.color：文字颜色

取值格式描述
英文单词color：red;大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色
rgbcolor：rgb(255,0,0)什么是三原色？ red，green，blue 什么是像素px？ 对于光学显示器，一整个屏幕是有一个个点组成，每一个点称为一个像素 点，每个像素点都是由一个三元色的发光元件组成，该元件可以发出三种颜 色，red，green，blue。 发光元件协调三种颜色发光的明亮度可以调节出其他颜色 格式：rgb(255,0,0); 参数1控制红色显示的亮度 参数2控制绿色显示的亮度 参数3控制蓝色色显示的亮度数字的范围0-255，0代表不发光，255代表发光，值越大越亮红色：rgb(255,0,0) 绿色：rgb(0,255,0) 蓝色：rgb(0,0,255) 黑色：rgb(0,0,0) # 所有都不亮 白色：rgb(255,255,255) # 所有都最亮 灰色：只要让红色/绿色/蓝色的值都一样就是灰色，而且三个值越小，越偏 黑色，越大越偏白色
rgbacolor：rgba(255,0,0,0.1);rgba到css3中才推出，比起rgb多了一个a，a代表透明度 a取值0-1，取值越小，越透明
十六进制color: #FF0000;#FFEE00 其中FF代表R，EE代表G，00代表B 只要十六进制的颜色每两位都是一样的，那么就可以简写为一个， 例如#F00 等同于#FF0000

6.文字属性简写：

/*font-weight: bolder;*/
/*font-style: italic;*/
/*font-size: 50px;*/
/*font-family: 'serif','微软雅黑';*/
简写为
font: bolder italic 50px 'serif','微软雅黑';

7.总结：

font-family 文字字体

font-size   文字大小

font-weight 文字粗细
    lighter(100) bold(400) bolder(900)
    
font-color  文字颜色 
    颜色单词, #十六进制, rgb(红, 绿, 蓝), rgba(红, 绿, 蓝, 透明度0~1)

8.案例：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能

                微信公众号:淘小欣...
            */
        }
    </style>
</head>
<body>
    <p>康总 抬走！！！fuck off!</p>
</body>
</html>

三、文字属性

1.text-align：文字对齐:

text-align 属性规定元素中的文本的水平对齐方式。

值描述
left左边对齐 默认值
right右对齐
center居中对齐
justify两端对齐

使用text-align注意:

在使用text-align时, 它只能争对文字(包括在块元素中的文字), 行内元素, 和行内块元素进行水平居中, 只争对没有包含文字的块元素是不起作用的.

2.text-decoration：文本装饰

text-decoration 属性用来给文字添加特殊效果。

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
inherit继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的下划线：

a {
  text-decoration: none;
}

3.text-indent：首行缩进

将段落的第一行缩进 32像素：

p {
  text-indent: 32px;
}

4.text-height：行高

注意: 文字像素不能大于行高

  • text-height:px或em, 文本行高

img

5.文字对其+行高实现文本水平垂直居中(掌握):

文本水平居中: line-height: 值 (值要等于居中元素的高度)

文本垂直居中: text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<!--包括在块元素中的文字-->
<div>
    <p>文本</p>
</div>
<br><br><br>

<!--行内元素-->
<div>
    <span>文本</span>
</div>
<br><br><br>

<!--和行内块元素-->
<div>
    <span style="inline-block">文本</span>
</div>
</body>
</html>

6.字符间距（了解）

注意: 只对中文起作用

  • letter-spacing: px或em, 定义文字与文字之间的距离

7.单词间距（了解）

  • word-spacing: px或em, 定义英文单词之间的距离

8.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style type="text/css">
        p {
            width: 500px;
            height: 200px;
            background-color: yellow;

            text-align: center;

            text-decoration: underline;

            line-height: 200px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>

<div>
    <p>hello英雄不问出处，流氓不论岁数</p>
    <a href="#">点我啊</a>
</div>

</body>
</html>

9.总结

文字对齐: text-align: center|right|left|justify
    只争对文字(包括块级元素中的文字), 行内, 行内块级

文字装饰: text-decoration: none|underline|overline|line-through
    none用于去除a标签自带的下划线
    
首行缩进: text-indent: 2em

四、背景属性

属性描述值
background-color设置标签的背景颜色的background-color: red;``background-color: rgb(0,255,0);``background-color: rgba(0,255,0,0.1);``background-color: #00ffff;
background-image设置标签的背景图片background-image: url(“images/2.jpg”);background-image: url(“图片网址”);注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充
background-size设置标签的背景图片的宽、高background-size: 300px 300px; background-size: 100% 100%;
background-repeat设置标签的背景图片的平铺方式background-repeat: repeat; #默认值，在垂直和水平方向都重复background-repeat: no-repeat; #不重复，背景图片将仅显示一次background-repeat: repeat-x; #背景图片将在水平方向平铺background-repeat: repeat-y; #背景图片将在垂直方向平铺应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问例如很多网站的导航条都是用这种手法制作的
background-attachment设置标签的背景图片在标签中固定或随着页面滚动而滚动background-attachment: scroll; #默认值，背景图片会随着滚动条的滚动而滚动background-attachment: fixed; #不会随着滚动条的滚动而滚动
background-position前端的坐标系"：`` *-------------------->x轴 | | | | | | y轴 *图片默认都是在盒子的左上角，background-position：属性，就是专门用于控制背景图片的位置background-position：水平方向的值，垂直方向的值1、具体的方位名词 *水平方向：left，center，right* *垂直方向：top，center，bottom*　　 *如果只设置了一个关键词，那么第二个值就是"center"。*2、百分比``　　***第一个值是水平位置，第二个值是垂直位置。\* 　　\*左上角是 0% 0%。右下角是 100% 100%。\* 　　\*如果只设置了一个值，另一个值就是50%。 ***``3、具体的像素（一定要加px单位）`` 例如：30px，50px等等　　第一个值是水平位置，第二个值是垂直位置。　　左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。　　如果只设置了一个值，另一个值就是50%。　　可以混合使用%和position值。
inherit设置从父元素继承background属性值以上背景属性的值均可以设置为inherit，代表从父元素继承background属性
背景缩写

1.基本使用

/*背景颜色*/
background-color: red;

/*背景图片*/
background-image: url('1.jpg');

/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 

/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

/*综合(背景属性缩写)*/
background: red url("1.jpg") no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

2.背景图片和插入图片的区别

#1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置

#2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以

#3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片

示例：滚动背景小栗子(结合background-attachment)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }
         div {
            height: 500px;
        }
        #d1 {
            background-color: red;
        }
        #d2 {
            background-color: green;
        }
        #d3 {
            background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png');
            background-attachment: fixed;
        }
        #d4 {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</body>
</html>

3.练习

准备：素材下载链接

蓝奏云：https://taoxiaoxin.lanzous.com/iSP1fmlshcf
密码:54q7

背景图片居中显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片居中显示</title>

    <style type="text/css">
        div {
            height: 500px;
            background-image: url("bg2.jpg");
            background-position: top center;
        }
    </style>
</head>
<body>

<div></div>
</body>
</html>

图片拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片拼接</title>

    <style type="text/css">
        div {
            height: 720px;
            background-image: url("bg1.jpg");

        }
        .box2 {
            background-image: url("ksyx.png");
            background-position: bottom center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>

    <style type="text/css">
         .navbar {
             margin: 0 auto;
             width: 920px;
             height: 50px;
             background-image: url("dht.png");
             background-repeat: repeat-x;

        }

    </style>
</head>
<body>

<div class="navbar">
</div>
</body>
</html>

rgba与opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .c1 {
            width: 200px;
            height: 200px;


            /*只能给背景设置透明度*/
            /*background-color: rgba(0,0,0,0.65);*/


            background-color: rgb(0,0,0);
            opacity: 0.65; /*改变整个标签的透明度*/
        }
    </style>




</head>
<body>

<div class="c1">我是我啊啊啊啊</div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        .c1 {
            height: 800px;

            /*背景颜色不能与背景颜色同时使用，如果想给背景图片设置透明度，则必须使用opacity*/
            background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg");
            background-size:300px auto;
            opacity: 0.55; /*改变整个标签的透明度*/
        }
    </style>

</head>
<body>

<div class="c1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>

    <style type="text/css">
         .box1 {
             height: 720px;
             background-image: url("bg1.jpg");
         }
        .box2 {
            background-image: url("ksyx.png");
            background-repeat: no-repeat;
            background-position: center bottom;
            height: 720px;

            /*只能给背景设置透明度*/
            /*background-color: rgba(0,255,0,0.3);*/

            /*改变整个标签的透明度*/
            opacity: 0.3;
        }

    </style>
</head>
<body>

<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

4.精灵图

什么是CSS精灵图（可以通过浏览器抓包分析：微博，京东都有精灵图）

  • CSS精灵图是一种图像合成技术

css精灵图的作用

  • 一个电商网站可能有很多图片，比如有10张图片，这就要求客户端发10次请求给服务端

  • 但其实一次请求的带宽就足够容纳10张图片的大小

  • 精灵图的作用就是用来较少请求次数，以及降低服务器处理压力

如何使用CSS精灵图

  • CSS的精灵图需要配合背景图片和背景定位来使用

强调：切图需要用到frameworks软件，可以知道每个图片具体宽多少个像素高多少个像素，该软件与ps属于一个家族

  • 在右面，图层-》位图-》出一把锁固定住图片
  • 然后左侧，有一个切片工具，框住图片

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>

    <style type="text/css">
         .box1 {
             width: 86px;
             height: 28px;
             background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510222513182-115432192.png");
             background-repeat: no-repeat;
             background-position: -425px -100px;

        }

    </style>
</head>
<body>

<div class="box1">
</div>
</body>
</html>

五、css盒子模型

1.CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

img

  • margin(外边距): 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

  • padding（内边距）: 用于控制内容与边框之间的距离；

  • border(边框): 围绕在内边距和内容外的边框。

  • content(内容):盒子的内容，显示文本和图像。

举个栗子：

以快递盒子为例：

  • 快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
  • 盒子的厚度(标签的边框 border
  • 盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
  • 物体的大小(内容 content)

更多详解：菜鸟教程

参考资料：博客园

盒子模型的宽度和高度

内容的宽度和高度

  • 通过标签的width和height属性设置
元素/盒子模型的宽度和高度
  • 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度
  • 高度同理可得（略）。
元素/盒子模型空间的宽度和高度
  • 宽度=左外边距 + 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 + 右外边距
  • 高度同理（略）。

img

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型宽度和高度</title>
    <style>
        span,a,b,strong {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
<span>我是span</span>
<a href="#"> 我是草链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>

</body>
</html>

问题：为什么height：100%；不起作用？

/*
如何让 height:100%起作用：你需要给这个元素的所有父元素的高度设定一个有效值。

换句话说，你需要这样做：
现在你给div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。*/

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

/*
相似的例子：可以查看qq注册界面https://ssl.zc.qq.com/v3/index-chs.html
*/

2.css显示模式：块级、行内、行内块级

  • 在HTML中HTML将所有标签分为两类，分别是容器级和文本级
  • 在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
HTML中容器级与文本级
  • 容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd

  • 文本级标签：只能嵌套文字、图片、超链接

    span、p、buis、strong、em、ins、del
CSS中块级与行内

  • 块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级

       div、h、ul、ol、dl、li、dt、dd   还有标签p

  • 行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内

 span、buis、strong、em、ins、del

  • 行内块级

     img
块级元素和行内元素的区别

  1. 块级元素block

    独占一行
可以设置宽高
	若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
	若没有设置宽高，那么就按照设置的来显示

  2. 行内元素inline

    不会独占一行
不可以设置宽高
	盒子宽高默认和内容一样

  3. 行内块级元素inline-block

    不会独占一行
可以设置宽高
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*块级元素*/
        div,p,h1 {
            background-color: red;
            width: 200px;
            height: 100px;
        }

        /*行内元素*/
        span,b,strong {
            background-color: blue;
            width: 200px;
            height: 100px;
        }


        /*行内块级元素*/
        img {
            width: 100px;
            height: 100px;

        }

    </style>
</head>
<body>
<!--块级-->
<div>我是div</div>
<p>我是段落 </p>
<h1>我是标题</h1>
<hr>

<!--行内-->
<span>我是span</span>
<b>我是加粗</b>
<strong>我是强调</strong>
<hr>


<!--行内块级-->
<img src="../imags/1.png" alt="">
<img src="../imags/1.png" alt="">

</body>
</html>

3.CSS显示模式转换

属性描述值
display可以通过标签的display属性设置显示模式none HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用block 块级inline 行内inline-block 行内块级
**display:"none"与visibility:hidden的区别：**visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

4.div与span

布局都是用块级元素，而行内元素是控制内容显示的。

  1. div标签：

    • 一般用于配合css完成网页的基本布局

  2. span标签：

    • 一般用于配合css修改网页中的一些局部信息，比如一行文字我们只为一部分加颜色<p>我是<span>egon</span></p>

  3. div和span有什么区别？

    div一般用于排版，而span一般用于局部文字的样式
1、站在CSS的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
2、站在HTML的角度：div是一个容器级标签，而span是一个文本级标签

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div与span标签</title>

    <style>
        .header {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: pink;

            margin-bottom: 10px;
        }

        .content {
            margin: 0 auto;

            width: 980px;
            height: 500px;
            background: #e9ca37;

            margin-bottom: 10px;

        }

        .footer {
            margin: 0 auto;

            width: 980px;
            height: 100px;
            background: #7e1487;

        }

        .logo {
            width: 200px;
            height: 50px;
            background: #bfccdb;
            float: left;
            margin: 20px;
        }

        .nav {
            width: 600px;
            height: 50px;
            background: palegreen;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 460px;
            background: #cccccc;
            float: left;
            margin: 20px;
        }

        .article {
            width: 650px;
            height: 460px;
            background: green;
            float: right;
            margin: 20px;

        }

        span {
            color: red;
        }

    </style>
</head>
<body>

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>



<div class="content">
    <div class="aside">
        <p>
            我是<span>EGON</span>，一个最接近<span>神的男人</span>
        </p>
    </div>
    <div class="article"></div>
</div>


<div class="footer"></div>


</body>
</html>

六、盒子模型各部分详解

1.border边框

同时设置四条边的边框border:边框的宽度 边框的样式 边框的颜色
分别设置四条边的边框border-left:边框的宽度 边框的样式 边框的颜色border-top:边框的宽度 边框的样式 边框的颜色border-right:边框的宽度 边框的样式 边框的颜色border-bottom:边框的宽度 边框的样式 边框的颜色
分别指定宽度、格式、颜色1、连写：（分别设置四条边的边框）bord-width: 上 右 下 左border-style:上 右 下 左border-color：上 右 下 左2 、注意点： 1、这三个属性时按照顺时针，即上、右、下、左来赋值的 2、这三个属性的取值省略时的规律 省略右面，右面默认同左边 省略下部，下面默认跟上面一样 只留一个，那么其余三边都跟这一个一样
了解非连写border-left-width: ;border-left-style: ;border-left-color: #000;border-top-width: ;border-top-style: ;border-top-color: #000;border-right-width: ;border-right-style: ;border-right-color: #000;border-bottom-width: ;border-bottom-style: ;border-bottom-color: #000;其他：``http://www.w3school.com.cn/cssref/pr_border-style.asp
边框的样式none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。
border-radius/* 单独设置一个角：数值越大，弧度越大*/``border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;/* 缩写设置 */border-radius: 20px;/* 所有角设置相同值 */border-radius: 20px 10px 10px 20px; /* 顺时针顺序：上左 上右 下左 下右*/``/* 百分比设置 */border-radius: 50%;/* 椭圆圆弧设置 */border-radius: 25%/50%; /* 前面一个值代表水平方向的半径占总宽度的，后面一个值代表垂直方向 */
详细介绍

边框属性

  • border-width
  • border-style
  • border-color
 #d1 {
   border-width: 2px;
   border-style: solid;
   border-color: red;
 }

通常用简写方式：

 #d1 {
   border: 2px solid red;
 }

边框样式

值描述
none 或者 0无边框。
dotted点状虚线边框。
dashed矩形虚线边框。
solid实线边框。
double双实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

 #d1 {
   border-top-style: dotted;
   border-top-color: red;
   border-right-style: solid;
   border-bottom-style: dotted;
   border-left-style: none;
 }

边框练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        div {
            width: 100px;;
            height: 100px;
        }

        .box1 {
            /*border: 5px solid black;*/

            /*border-left: 5px solid black;*/
            /*border-top: 5px solid black;*/
            /*border-right: 5px solid black;*/
            /*border-bottom: 5px solid black;*/

            border-width: 5px;
            border-style: solid;
            border-color: black;
        }

        .box2 {
            /*border-left: 5px solid purple;*/
            /*border-top: 5px solid red;*/
            /*border-right: 5px solid green;*/
            /*border-bottom: 5px solid blue;*/

            border-width: 5px;
            border-style: solid;
            border-color: red green blue purple;

        }

        .box3 {
            /*border: 5px solid red;*/
            /*border-right: 5px dashed red;*/


            border-width: 5px;
            border-style: solid dashed solid solid;
            border-color: red;
        }

        .box4 {
            border-width: 5px;
            border-style: solid dashed solid dashed;
            border-color: red;
        }

        .box5 {
            border:5px solid black;
            border-bottom: none;
        }

        /*！！！在企业开发中要尽量降低网页的体积，图片越多，体积肯定越大，访问速度肯定越慢，所以针对简单的图形，可以只用用边框画出来
        使用下面的方法制作就可以
        */
       .box6 {
            width: 0px;
            height: 0px;
            border-width:25px;
            border-style: solid;
            border-color: black white skyblue white;
            border-bottom: none;
        }


    </style>
</head>
<body>


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



</body>
</html>
border-radius制作圆、圆角、圆环以及半圆:
  • 制作圆
Copy #d1 {
     height: 400px;
     width: 600px;
     background-color: yellow;
 
     /*border-radius: 200px 300px;*/ /*第一种写法: 将border-radius设置为长或高的一半即可得到一个圆形。*/
     border-radius: 50%;             /*第二种写法*/
 }
  • 制作半圆
Copy# 长方形的盒子的基础之上, 设置圆角制作半圆
注意:  一定要长方形的盒子制作半圆必须满足1:2的关系的长方形  
举例(制作上半部分的半椭圆): 长方形的盒子宽: 1000px 高: 500px
  border-top-right-radius: 500px
  border-top-left-radius: 500px 
  水平方向,垂直方向裁剪500px 半径的圆弧

  • 圆角

    # 单独属性指定圆角
border-top-left-radius: 属性值(属性值可以设置多个值)
    举例: 正方形盒子边长: 800px
    设置一个值: 
        100px, 左上角和盒半径指定为100px的一个圆弧
        
    设置两个值: 
        100px 200px, 左上角水平方向指定半径为100px 的圆弧, 垂直方向指定半径为200px的圆弧
        第一个值表示水平方向
        第二个值表示垂直方向


# 综合属性指定圆角
    border-radius: 属性值(在水平和垂直方向的基础之上指定半径为圆弧的圆角)
    举例: 正方形盒子边长: 800px
    设置一个值: 
        100px, 指定盒上下左右4个角取水平和垂直方向的半径为100px的圆弧
        
    设置二个值:
        100px 200px, 指定盒子左上角及对角(右下角)水平和垂直方向的半径为100px的圆弧, 右上角及对角(左下角)水平和垂直方向的半径为200px的圆弧
        第一个值表示左上角及对角(右下角)的半径圆弧
        第二个值表示右上角及对角(左下角)的半径圆弧
        
    设置三个值:
        100px 200px 300px, 指定盒左上角为半径100px 的圆弧, 右上角半径为200px 的圆弧, 右下角和左下角半径为300px的圆弧
        其中100px 等指的都是半径的距离
        第一个值表示左上角的半径圆弧
        第二个值表示右上角的半径圆弧
        第三个值表示右下角和左下角的半径圆弧
        
设置四个值:
        100px 200px 300px 400px, 指定盒左上角为半径100px 的圆弧, 右上角半径为200px 的圆弧, 右下角半径为300px的圆弧, 左下角半径为400px的圆弧
        第一个值表示左上角的半径圆弧
        第二个值表示右上角的半径圆弧
        第三个值表示左下角的半径圆弧
        第四个值表示右下角的半径圆弧

  • 制作圆环

Copy# 在圆的基础设置之上, 设置边框制作圆环
举例: 正方形盒子边长为800px
    1. 先裁剪半径角, 制作成圆:  border-radius: 50%
    2. 在外面给一个200px的边框, 实现制作圆环: border: 200px solid purple
  • 制作椭圆
Copy# 在长方形的基础之上, 设置圆角制作椭圆
举例: 长方形的盒子宽: 1000px 高: 500px
    border-radius: 50% (50% 代表, 水平方向上以500px 半径进行切, 垂直方向以250px半径进行切)
    
    或
    border-top-left-radius: 500px 250px
    border-top-right-radius: 500px 250px
    border-bottom-left-radius: 500px 250px
    border-bottom-right-radius: 500px 250px

border-radius练习

  • 练习一
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        .box1 {
            margin: 0 auto;
            height: 100px;
            width: 920px;
            border-radius: 5px 5px 0px 0px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
  • 练习二
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
       
        img {
            width: 185px;
            border-radius: 50%;

        }
    </style>
</head>
<body>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F17%2F20150417H1024_UxSLA.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617798029&t=d93ee3d80629063a82e1c764ad332021" alt="">
</body>
</html>
清除input标签获取焦点时显示的外线:
Copyinput {
    outline: none;
    /*outline: 0;*/
}
padding内边距：边框与内容的距离就是内边距
Copyp {
    border: 3px solid red;
    padding-left: 20px;
    padding-top: 30px;
    padding-right: 40px;
    padding-bottom: 50px;
}

/*推荐写法*/
p {
    padding: 10px;  /*上下左右*/
    padding: 10px 20px;  /*上下 左右*/
    padding: 10px 20px 30px;  /*上 左右 下*/
    padding: 10px 20px 30px 40px;  /*顺时针: 上 右 下 左*/

内边距练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距属性</title>
    <style>
        div {
            width: 100px;
            height: 110px;
            border: 1px solid red;
        }

        .box1 {
            padding-top: 30px;
        }

        .box2 {
            padding-right: 40px;
        }

        .box3 {
            padding-bottom: 50px;
        }

        .box4 {
            padding-left: 60px;
        }

        .box5 {

            /*只留一个。全都相等*/
            padding: 70px;
            background-color: red;
        }
    </style>
</head>
<body>

<div class="box1">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

<hr>
<div class="box2">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

<hr>
<div class="box3">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

<hr>
<div class="box4">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

<hr>
<div class="box5">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>


</body>
</html>

添加边框与padding后保持盒子大小不变：方式一做减法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .box1 {
            /*width: 100px;*/
            /*height: 100px;*/
            background-color: red;
            border: 10px solid #000;
            padding: 10px;

            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>

<div class="box1">我是文字</div>
</body>
</html>

添加边框与padding后保持盒子大小不变：方式二

box-sizing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid #000;
            padding: 10px;

            /*本质原理就是做减法*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="box1">我是文字</div>
</body>
</html>
外边距：标签与标签之间的距离就是外边距
非连写margin-top：20px；margin-right：20px；margin-bottom：20px；margin-left：20px；
连写margin：上 右 下 左;
注意1、外边距的那一部分是没有背景颜色的2、外边距合并现象 *在默认布局的水平方向上，默认两个盒子的外边距会叠加* 而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

  • 外边距合并现象

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象
    </title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        div {
            height: 100px;
            border: 1px solid #000;
        }

        /*水平方向上。外边距会叠加*/
        .hezi1 {
            margin-right: 50px;
        }

        .hezi2 {
            margin-left: 100px;
        }

        /*垂直方向上。外边距不会叠加，会合并成一个，谁比较大就听谁的*/
        .box1 {
            margin-bottom: 50px;
        }

        .box2 {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<!--
快捷创建
span.hezi${我是span}*2
-->

<span class="hezi1">我是span</span><span class="hezi2">我是span</span>

<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

  • margin-top塌陷

    • 两个嵌套的盒子，内层盒子设置margin-top后会将外层盒子一起顶下来，解决方法如下：

      1. 外部盒子设置一个边框

      2. 外部盒子设置 overflow: hidden; 当子元素的尺寸超过父元素的尺寸时，内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。

      3. 使用伪元素类：

        .clearfix:before{
    content: '';
    display:table;
}

    • 示范：

    #示范
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型宽度和高度</title>
    <style>
        .outter {
            background-color: green;
            width: 300px;
            height: 300px;

            /*方式一*/
            /*border: 1px solid #000;*/

            /*方式二*/
            /*overflow: hidden;*/
        }
        .inner {
            background-color: red;
            width: 200px;
            height: 200px;

            margin-top: 100px;
        }

        /*方式三*/
        .clearfix:before {
            display: table;
            content: "";
        }

    </style>
</head>
<body>

<div class="outter clearfix">
    <div class="inner"></div>
</div>
</body>
</html>
内边距vs外边距

  1. 在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离

    应该首先考虑padding
其次再考虑margin

margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系

    示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>

        .egon {
            width: 300px;
            height: 300px;
            background-color: yellow;
            padding: 50px;
            box-sizing: border-box;
        }

        .alex {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        .linhaifeng {
            width: 300px;
            height: 300px;
            background-color: purple;
            padding: 50px;
            box-sizing: border-box;

            margin-top: 100px;
        }

        .liuqingzheng {
            width: 100px;
            height: 100px;
            background-color: blue;
        }


    </style>
</head>
<body>

<div class="egon">
    <div class="alex"></div>
</div>

<div class="linhaifeng">
    <div class="liuqingzheng"></div>
</div>

</body>
</html>

  2. 如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，那么外面一个盒子也会被顶下来

    如果外面的盒子不想被遗弃顶下来，，那么可以给外面的盒子设置一个边框属性

    代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>

        .egon {
            width: 300px;
            height: 300px;
            background-color: yellow;
            box-sizing: border-box;

            border: 1px solid #000;
        }

        .alex {
            width: 100px;
            height: 100px;
            background-color: green;

            margin-top: 50px;
        }

    </style>
</head>
<body>

<div class="egon">
    <div class="alex"></div>
</div>


</body>
</html>
盒子居中与内容居中

内容居中

1、让一行内容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;

2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中，

比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行
的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
*/
height: 80px;
line-height: 20px;

padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中和内容居中</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;

            /*多行内容水平居中与单行一样*/
            text-align: center;

            /*多行内容垂直居中*/
            line-height: 30px;
            padding-top: 120px;
            box-sizing: border-box;

        }




    </style>
</head>
<body>

<div>
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字

</div>


</body>
</html>

盒子居中

text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中和内容居中</title>
    <style>
         .son {
            width: 300px;
            height: 300px;
            background-color: red;

            /*多行内容水平居中与单行一样*/
            text-align: center;

            /*多行内容垂直居中*/
            line-height: 30px;
            padding-top: 120px;
            box-sizing: border-box;

            /*盒子本身水平居中*/
            margin: 0 auto;

        }

        .father {
            width: 500px;
            height: 500px;
            background-color: yellow;
        }



    </style>
</head>
<body>

<div class="father">
    <div class="son">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    </div>
</div>
</body>
</html>
防止文字溢出word-break: break-all;

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎界面</title>
    <style type="text/css">

        div {
            width: 200px;
            height: 200px;

            /*字母、数字溢出，可以用下列属性控制自动换行：允许在单词内换行。
            http://www.w3school.com.cn/cssref/pr_word-break.asp
            */
            word-break: break-all;
        }

        .box1 {
            background-color: red;


        }
        .box2 {
            background-color: green;
        }

        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>

</div>


<div class="box2">遗憾白鹭上青天两个黄鹂鸣翠柳啊哈哈哈

</div>

<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我
</div>
</body>
</html>
清除默认边距
#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距

#2、如何清空默认的边距
        * {
            margin: 0px;
            padding: 0px;
        }

#3、注意点：
    通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/
  
    拷贝代码：
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

    可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面这么写

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除默认边距</title>
    <style>

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


        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

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

</body>
</html>

2.总结：

块级元素(盒子):  宽度没设置默认继承父元素
    如果没有设置宽度默认继承父元素的宽度, 这时决定盒子的真实大小由边框,内填充,内容(高度)决定 
    如果设置宽度, 这时决定盒子的真实大小由边框,内填充,内容(宽+高)决定.
    
行内元素(盒子):
    盒子真实的大小由文本内容决定.
    
行内块级元素(盒子): 宽度没有继承这么一说
    盒子的真实大小由边框,内填充,内容(宽+高)决定.
    
注意!!!: 水平方向上注意行内,行内块级元素的空白折叠现象. 垂直方向上注意margin的外边距塌陷

七、display属性（显示样式）

用于控制HTML元素的显示效果。

值意义
display:noneHTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:block默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:inline按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:inline-block使元素同时具有行内元素和块级元素的特点。

display:none 与 visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

详细介绍

HTML5预定义了很多系统标签，大家学习了html标签部分的时候，肯定注意到了，不同的标签在页面中的显示效果是不一样的，比如两个div之间默认会换行显示，而两个span标签却在一行来显示，到底是什么样式控制着标签这种显示效果呢，那就是显示样式display来控制的。

  • display: block;
<div style="display: block;"></div>
<span style="display: block;"></span>
<i style="display: block;"></i>
<!--
1. 任意标签的display样式值均可以设置为block，那么该标签就会以block方式来显示
2. block方式显示的标签，默认会换行
3. block方式显示的标签，支持所有的css样式
4. block方式显示的标签，可以嵌套所有显示方式的标签
注：标题标签和段落标签虽然也是block显示类标签，但不建议嵌套block显示类标签
-->

  • display: inline;

    <div style="display: inline;"></div>
<span style="display: inline;"></span>
<i style="display: inline;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline，那么该标签就会以inline方式来显示
2. inline方式显示的标签，默认不会换行
3. inline方式显示的标签，不支持所有css样式(如：不支持手动设置该标签的宽高)
4. inline方式显示的标签，建议只用来嵌套所有inline显示方式的标签
-->

  • display: inline-block;

    <div style="display: inline-block;"></div>
<span style="display: inline-block;"></span>
<i style="display: inline-block;"></i>
<!--
1. 任意标签的display样式值均可以设置为inline-block，那么该标签就会以inline-block方式来显示
2. inline-block方式显示的标签，具有inline特性，默认不换行
3. inline-block方式显示的标签，也具备block特征，支持所有css样式
4. inline-block方式显示的标签，不建议嵌套任意显示方式的标签
-->

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
贾维斯Echo
关注
  • 2
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS基础--属性设置
weixin_51516810的博客
04-22 432
1.字体的CSS属性设置 分为以下几种： 1.color-----设置字体的颜色【颜色单词/颜色码（#0000ff）】 2.font-family -----设置字体名称 就是字体的样式【黑体…】 3.font-style -------设置字体的倾斜【normal（正常的） italic/oblique (字体倾斜)】 4.font-size-----设置字体的大小【数字 px】 5.font-weight------设置字体粗细 【整百的数字（100-900）注释：101和100显示的效果是一样
CSS基本属性
小宋的博客
03-25 490
//由自己整理出来的，纯手打1. 字体属性表3-2 字体属性属性名属性含义 属性值                                   font-family字体名称任意字体名称font-style字体风格normal（普通，默认值）、 italic（斜体）、 oblique（倾斜）font-variant字体变形normal（普通,默认值），small-caps（小型大写字母）f...
CSS设置
weixin_48268485的博客
06-22 1139
CSS样式设置
CSS的各种属性，以及样式设置
m0_72815229的博客
10-27 1746
【代码】CSS的各种属性，以及样式设置。
css常用到的设置总结
webhhhhhh的博客
05-26 98
css常用到的设置总结 1.每段文本自动缩进两个字符 text-indent:2em; 2.元素超出盒子宽度自动变成省略号 white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 3.ES6数组去重 white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 4.es6中的模板字符串拼接 结果： 5.数组里面有多个对象，对象中有多个属性，在这些属性中选
CSS全局样式的设置，【建议收藏】
最新发布
03-16 1167
* 调整字体大小IE浏览器FireFox浏览器 */body{margin: 0;/* 外边距padding: 0;内边距border: 0;边框 */a {/* 去除默认下划线 */a:focus {/* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */outline: 0;h1 {/* 使h1标签在section标签和article标签的留白和字体样式统一。*/
web前端学习（二十三）——CSS3定位（position）、元素裁剪（clip）及鼠标样式（cursor）属性的相关设置
★★光亭★★
02-03 9387
web前端学习（二十三）——CSS3定位（position）、元素裁剪（clip）及鼠标样式（cursor）属性的相关设置
CSS样式的基础学习总结
09-25
除了这些基础属性，CSS还包括其他的样式属性，如背景色、边框、盒模型、文本对齐、列表样式、定位、浮动、响应式设计等。学习CSS需要理解选择器的工作原理，如元素选择器、类选择器、ID选择器，以及更高级的选择器如...
jQuery 改变CSS样式基础代码
12-09
表示把颜色设为’#123456′ 如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下： 代码如下: var divcss = { background: ‘#EEE’, width: ‘478px’, margi
浅谈HTML（css基础样式）
09-24
在本文中，我们将深入探讨 CSS 的基础样式，包括边框、布局、定位以及浮动等关键概念。 首先，边框（border）是定义元素外观的重要部分。在示例中，`border: 5px salmon solid` 设置了一个 5 像素宽的固体边框，...
HTML基础知识——css样式表,样式属性,格式与布局详解
09-28
下面小编就为大家带来一篇HTML基础知识——css样式表,样式属性,格式与布局详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML基础必看——全面了解css样式表
09-28
样式属性包括： 1. 背景与前景：如背景颜色、文本颜色等。 2. 边界和边框：`border`定义边框，`margin`控制元素外边距，`padding`设定元素内容与边框之间的距离。 3. 列表和方块：`width`和`height`设置尺寸，`...
第七章 边框属性
DaDaguai001的博客
09-11 3753
边框属性 边框有3个属性: 一个是边框宽度属性，用于设置边框的宽度， 二是边框颜色，用于设置边框的颜色， 三是边框样式，用于控制边框的样式 .1边框样式border-style 定义边框的风格样式，用于指定可见的边框。可以设置上边框样式border-top-style，下边框样式border-bottom-style 左边框样式，border-left-style，右...
CSS设置样式的三种方式
weixin_43786395的博客
11-11 5149
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言1.CSS1.1内联样式1.2内部样式表1.3外部样式表 前言 对css的学习进行总结 提示：以下是本篇文章正文内容 1.CSS 网页分为三个部分： ①结构(HTML) ②表现(CSS) ③行为(JavaScript) CSS（层叠样式表）：网页实际上是一个多层的结构，通过css可以分别为网页的每个层设置样式，而最终我们能看到的只是网页的最上层，css就是用来设置网页元素的样式。 css修改元素样式的方式有三种：(1)内
CSS样式操作大全——基本语法篇
happy81997的博客
03-31 1854
CSS样式操作大全
CSS相关样式设置
CheryW的博客
06-14 661
样式水平、居中设置
CSS样式属性（一）
热门推荐
40128682的博客
05-10 2万+
字体样式 font-size:字号大小 font-size属性 设置字号 该属性的值可以使用相对长度单位 也可以使用绝对长度单位 其中相对长度单位比较常用 推荐使用px像素单位 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素，最常用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 p 点 font-family:字体 fon...
CSS的文本属性：文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等
qq_44156869的博客
09-13 895
CSS文本属性 CSS Text （文本） 属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等。 文本的颜色 color 属性定义文本的颜色。 <head> <style> div { color: pink; } </style> </head> <body> <div>该睡觉啦，啊啊啊啊</div> </body> 表示 属性
web前端开发介绍
淘小欣的博客
03-02 1万+
前端内容介绍 一、什么是前端 应用软件组成：前端＋后端 后端负责处理业务逻辑＆提供数据，任何与用户直接打交道的操作界面都可以称之为前端，主要负责页面展示、与用户交互等等下面都是前端： 公司官网（在PC通过浏览器来访问公司网站） 移动端网页（在手机上来浏览公司信息、小游戏等） 移动端APP（例如：淘宝、去哪儿旅游、携程等） 微信小程序（微信最新推出的功能，随用随装，不占用手机空间）。 前端开发是从网页制作演变而来的。 早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。 随着互联网

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贾维斯Echo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值