2022年7月10 第四组 周鹏 CSS的基本认识

CSS 层叠样式表

网页美观

html相当于原材料，css用来加工好看

 

如何嵌入？

样式如何显示html元素？

样式通常存储在样式表中

把样式表添加到html元素里

 

定义CSS方式

1，行内样式，可以使用，但不推荐，只有当当前样式不需要复用的时候可以使用

行内样式优先级较高

 

​
 

我是大帅比

​

    <!-- 行内样式，内联样式，style表示CSS样式 -->     我真的是大帅比

 

 

2，内页样式，

在head里用<style></style>使用。

 

 <style>         /* 根据标签来命名 */         /* 选择器selector */         /* 标签选择器   可以让页面上所有的P标签都有对应的控制 */         p{             background-color: brown;         }         /* 声明一个样式，并起个名 */         /* 类选择器 用.  类选择器的优先级大于标签选择器*/         div{             background-color: brown;         }         .bg{            background-color: blue;         }         /* id选择器 用#号 */         #sp{             background-color: aqua;         }     </style>

</head>

<body>

​
   

我是大帅比

   
        我是大帅比哦    
​

    <!-- 类选择器。class是类的意思 -->

​
   
        我是超级超级大帅比    
​

</body>

 

 

3，外部样式（推荐使用）

使用方式和内页样式一样，但放在另外的文件里

<link rel="stylesheet" href="文件目录">

 

 

 

 

 

CSS的选择器：

1，标签选择器

2，类选择器， 一个标签元素是科研选择多个样式，样式名中间用空格隔开

3，id选择器

4，并列选择器：

 

​
​
<style>
  页面上所有的div和p的样式都一样 
​
​
•    div,p{
​
•      
​
•    }
​
 页面上所有的div和p的样式都一样   注意，无论P到div有多少层，只要p的上层中有div存在，p都会改变 
​
•    div p{
​
•      
​
•    }
​
 只能选中div子元素的p，不能是更下层的元素
        div>p{
            
        }
选中div紧邻下方的p，只能是同级元素 
        div+p{
            
        }
​
</style>

 

5，属性选择器

<style> /* 属性选择器 ，选中页面上所有带有type属性的标签，用英文的[]选中 */ [type=text]{ background-color: bisque;
    }
    
  选中页面上选中某个属性，包涵单词的所有元素
  [type~=单词]{
  
  }
  一般用class
  [class~=单词]{
  
  }

</style>

6, 伪类选择器

<style>
        /* 链接颜色 */
        a:link{
            color: red;
        }

​ /* 鼠标悬停样式 */ ​ a:hover{ ​ color: aqua; ​ }

​ /* 元素被激活 */ ​ a:active{ ​ color: antiquewhite; ​ }

​ ​ /* 点过的链接 */ ​ a:visited{ ​ color: blueviolet; ​ }

</style>

 

7，

从很多个元素中选中其中一个 元素名比如 li 则：

li:nth-child(第几个数字，甚至可以是表达式，比如3n，代表3的倍数) {}

注：整个界面中所有符合要求的的li都会被选中。

 

 

 

8， ：属性 选中所有属性的元素·

 

 

 

 

CSS层叠样式表优先级的问题

 

优先级原则是就近原则，哪个样式离结构本体近，就执行哪个，所以行内样式的优先级最高，但如果样式不冲突，就不层叠

例：

 

    .a{
​
•               背景：红
​
•               字体颜色：蓝
​
}
​
•           .b{
​
•           字体颜色：绿
​
}

 

    <div class="a b">我是div</div>

 

则背景为红，字体颜色为绿

 

 

CSS的继承原理

字标签在没有其他样式的情况下，会继承父辈的某些样式，

 

继承的样式权最低，也就是优先级最低。

行内最高。

权重相同则就近原则。

但权重不是固定的，使用 !importart 这个代码的权重是无限大

添加方法为

 

.a{

字体颜色：蓝!importart ；

}

.b{

字体颜色：绿；

}

    <div class="a b">我是div</div>

字体就是蓝色的了

 

 

 

 

 

CSS常用单位

1，px像素，绝对单位，一个像素代表一个点，。

2，em是相对单位。它会参考它的父级元素。

例：字体，父级元素字体为16px，要设置元素字体大小为2em，当前元素的字体大小就是32px

3，rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版。

4，百分比：相对于父级元素的比列。

 

 

 

CSS属性：

1，block 区块

 

行高 line-height:     数值 | inherit | normal;
字间距 letter-spacing:     数值 | inherit | normal;
词间距 word-spacing:    数值 | inherit | normal;
空格 white-space:    pre(保留) | nowrap(不换行) | normal;

 

/*表格宽度自适应*/
th {
white-space: nowrap;
}
display:
none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/

 

 

2. box 盒子

width 和 height ：表示内容区的宽和高

margin : 外边距 表示元素距离上一个元素的位置，若没有，则是距离窗体的距离

padding ： 内边距 本元素内部空出的距离

border ： 边框线

宽度 **width**:           长度 | 百分比 | auto;
高度 **height**:         长度 | 百分比 | auto;
清除 **clear**:           none | left | right | both;
边界 **margin**:          上 右 下 左 ;
填充 **padding**:           上 右 下 左 ;
定位 **position**:           absolute | relative | static;
透明度 **visibility**:         inherit | visible | hidden;
溢出 **overflow**:           visible（现实） | hidden（隐藏） | scroll auto（滚动）;
裁切 **clip**:             rect(12px,auto,12px,auto)

 

 

 

3， position 定位

一般用来写网页顶端的固定导航条，或者两侧的菜单。

 

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->
 
<div style="position:fixed; height:10%;  color:white; width:100%; top:0px;">我是导航</div>
<div style="">
    <div style="position:fixed; bottom: 0px; top:10%; float:left; width:20%; background-color:indianred">我是菜单</div>
    <div style="float: right;  width:80%;">
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>

absolute与relative

这两者一般配合使用，用于调整div之间的相对位置

absolute 绝对定位 当前的文档流可以理解为浮起来，不占位置，

参照物是已经定位的父级元素

relative 相对定位 与absolute相同，但不浮起来，占位置

 

不常用的两个：

static 文档流（默认，不设置就是他）

float 浮动 浮动的元素会脱离原本的文档流，造成父元素的高度坍塌，包围图片和文本的div不占据空间，使用了浮动的元素，后面紧跟它的元素会错乱

<div style="position:relative; width: 300px; height: 150px;">
    <div style="position:absolute; float: left; width: 20%;  bottom: 0px; right: 0px;">我是菜单</div>
</div>

 

4， float 漂浮

漂浮 float: left | right | none; 在页面布局的时候用的最多

常见用法

<div style='background-color:red;float:left;width: 50%;' >div1</div>
<div style='background-color:green;float:right;width: 50%;' >div2</div>

一个问题

子标签使用了float时候，父标签的样式失效

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>

解决方案一：clear: both 清除浮动

<div style='background-color:red;'>
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
    <div style="clear: both;"></div> <!--加上clear：both之后就正常了-->
</div>

解决方案二：clearfix

<div style='background-color:red;' class="clearfix">
    <div style="float: left">div1</div>
    <div style="float: left">div2</div>
</div>


.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

 

 

5，透明度

.image{
    opacity: 0.5
}
<img src="图片地址" style="opacity: 0.5; width:50%; height:50%; "

 

6，font 字体

		颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: 
				"Courier New", 
				Courier, monospace,
                "Times New Roman", 
                Times,
                serif, 
                Arial, 
                Helvetica,
                sans-serif, 
                Verdana
样式 font-style:   oblique;(偏斜体)
				   italic;(斜体)
                   normal;(正常)
粗细 font-weight:   bold;(粗体)
					lighter;(细体)
                    normal;(正常)
变体 font-variant: small-caps;(小型大写字母) 
					normal;(正常)

 

 

7，background 背景

背景 background: transparent; /透视背景*/ ​ 颜色 background-color: 数值; ​ 图片 background-image: url() | none; ​ 重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/

滚动 background-attachment: fixed | scroll; 位置 background-position:数值 | top | bottom | left | right | center;

background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

 

 

8，border 边框

边框样式 

	**border-style: dotted;(点线)**

​							**dashed;(虚线)** 

​							**solid;（实线）** 

​							**double;(双线)** 

​							**groove;(槽线)** 

​							**ridge;(脊状)** 	

​							**inset;(凹陷)** 

​							**outset;**
**边框宽度      border-width: ;**
**边框颜色      border-color: top值 right值 bottom值 left值;**
**简写         border: width style color;
边框线间距     border-spacing: 0;
边　　框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}

 

9 list-style 列表样式

类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/

位置 list-style-position: outside | inside; 图像 list-style-image: URL; 简写 list-style:目录样式类型 | 目录样式位置 | url;

 

 

10，margin 边界

margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;

 

11， padding 填充

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

 

12， vertical 垂直

vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/

 

13 a 链接

a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/

 

14 cursor 光标

光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
​
/*也可以自定义*/
cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/

15,隐藏

 

    visibility:hidden;元素隐藏
 
posted @ 2022-07-11 21:36  牛杂刻师傅  阅读(33)  评论(0)    收藏  举报