【2020Python修炼记】前端开发之 CSS基础样式

【目录】

一、文字样式

二、背景样式

三、显示样式

四、边框

 

一、文字样式 

用于控制字体 文本显示的方式

font-weight用来设置字体的字重（粗细）

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

 

color：文字颜色 

取值	格式	描述
英文单词	color：red;	大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色
rgb	color：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) # 所有都最亮 灰色：只要让红色/绿色/蓝色的值都一样就是灰色，而且三个值越小，越偏  黑色，越大越偏白色
rgba	color：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

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

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

 

text-decoration：文本装饰

值	描述
none	默认。定义标准的文本，通常用来去掉a标签的下划线
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

例子：

/*字族：STSong作为首选字体, 微软雅黑作为备用字体*/
font-family: "STSong", "微软雅黑";

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

/*字重：100、200、300、400、500、600、700、800、900，值越大字越粗*/
font-weight: 900;

/*行高: 字体文本默认在行高中垂直居中显示*/
line-height: 200px;

/*字划线: overline(上划线) | line-through(中划线) | underline(下划线) | none(取消划线) | 
　　　　　　inherit 继承父元素的text-decoration属性的值 */
text-decoration: overline;

/*字间距*/
letter-spacing: 2px;

/*词间距*/
word-spacing: 5px;

/*首行缩进：1em相当于一个字的宽度*/
text-indent: 2em;

/*字体颜色 (还有多种颜色设置的方法，详见代码例子)*/
color: red;

/* 文本水平排列方式：left(水平居左) | center(水平居中) | right(水平居右) | justify (两端对齐)*/
text-align: center;

    <style>
        p {
            /* !*第一个不生效就用后面的 写多个备用*! */
            font-family: "Arial Black","微软雅黑","...";  
            /* !*字体大小*! */
            font-size: 24px;  
            /* !*bolder lighter 100~900 inherit继承父元素的粗细值*! */
            font-weight: inherit;  

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

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

                微信公众号:软件管家...
            */
        }
    </style>

 

二、背景样式  

属性	描述	值
background-color	设置标签的背景颜色的	background-color: rgb(0,255,0); 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	前端的坐标系"： 0-------------------->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属性
背景缩写		body { background: red url(xx.png) no-repeat fixed center/300px 300px; }

/*背景图片：url函数可以链接网络或本地图片*/
background-image: url('https://www.baidu.com/favicon.ico');

/*平铺:repeat-x(x轴平铺) | repeat-y(y轴平铺) | repeat(双轴平铺) | no-repeat*/(不平铺)
background-repeat: no-repeat;

/*x轴背景图片位置偏移：正值往右偏移，负值往左偏移*/
background-position-x: 10px;

/*y轴背景图片位置偏移：正值往下偏移，负值往上偏移*/
background-position-y: 10px;
　
/* !*第一个左  第二个上*! */
background-position:center center;  

/* 锁定图片为背景地图，不可滑动 */
background-attachment: fixed;

/* 背景颜色 */
background-color: rgb(0,0,0);

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

 

三、显示样式——由display 控制

在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素

#1、HTML中容器级与文本级

    容器级标签：可以嵌套其他的所有标签
    div、h、ul>li、ol>li、dl>dt+dd

    文本级标签：只能嵌套文字、图片、超链接
    span、p、buis、strong、em、ins、del

#2、CSS中块级与行内

    块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
    div、h、ul、ol、dl、li、dt、dd   还有标签p


    行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
    span、buis、strong、em、ins、del


#3、块级元素与行内元素的区别

    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>

示例

 

---

 

display:none;

<!-- HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 -->

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方式显示的标签，不建议嵌套任意显示方式的标签
-->

display:"none"与visibility:hidden的区别：

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

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

 

四、边框

边框属性：

• border-width

• border-style

• border-color

边框样式：

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

  <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
　　　　　　　　# 单独为 某一边框设置样式
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
　　　　    
            border: 3px solid red;  /*简写形式，三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>

 

参考阅读：

https://www.cnblogs.com/Dominic-Ji/p/10474769.html

https://www.cnblogs.com/linhaifeng/articles/9011138.html