前端之CSS

伪元素选择器

  • first-letter

常用的给首字母设置(修改)特殊样式。

p:first-letter {
            color: red;
            font-size: 48px;
        }
  • before

在文本开头添加内容。

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}
  • after

在文本结尾添加内容。

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

伪元素选择器的使用场景:
1、before和after常用于后面清除浮动带来的负面影响。
2、用于网站的内容防爬。

选择器的优先级

一般情况下,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式。

相同选择器:遵循就近原则

不同选择器:统配<标签选择器 <class类选择器<id选择器<行间式<!important

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选择器优先级</title>
    <style>
        #div {
            background-color: yellow;
        }

        .div {
            background-color: yellowgreen;
        }

        div {
            background-color: green!important;
        }

        * {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
        /*!important 优先级要强于行间式, 在属性值与;之间设定*/
    </style>
</head>
<body>
    <div class="div" id="div" style="background-color: red"></div>
    <!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important-->
</body>
</html>
复制代码

 

 

 

 css相关属性

  • 宽和高

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

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

块级标签才能设置宽度,内联标签的宽度由内容来决定。

  • 字体属性

  • 文字字体>>>:font-family: "Microsoft Yahei"

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
  • 字体大小>>>:font-size: 24px

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

p {
  font-size: 14px;
}
  • 字重(粗细)>>>:font-weight: lighter\bolder

font-weight用来设置字体的字重(粗细)。

p {
  font-weight: lighter;
}
描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

 

  • 文本/字体颜色

颜色属性被用来设置文字的颜色。

方式1:十六进制>>>:color: #4f4f4f;

方式2:一个RGB值>>>:color: rgb(128, 128, 128);

方式3:颜色的英文名字>>>:color: red;

  • 文字属性

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

  • 文字对齐

text-align:center/left/right  》》》居中、左对齐、右对齐

  • 文字装饰
  1. text-decoration: none; 》》》主要就是用于去除a标签的下划线
  2. text-decoration: line-through;》》》  删除线
  3. text-decoration: overline; 》》》上边线
  4. text-decoration: underline; 》》》下划线
a {
  text-decoration: none;
}
描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
  • 文字首行缩进
/*将段落的第一行首行缩进32像素/*
p {
  text-indent: 32px;
}
  • 背景属性

  • 背景颜色:background-color: red;
  • 背景图片:background-image:url("111.png");
  • 背景重复:
 repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺

          背景图片如果没有设置的区域大,那么默认自动填充满。

  • 背景位置:background-position:left top;  图片位置

简写模式:

background:#336699 url('1.png') no-repeat left top;

  • 边框属性

自定义调整每个边的边框:

border-width》》》边框宽度

border-style》》》边框样式

border-color》》》边框颜色

border-radius 50%》》》用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。如果长宽一样那么就是圆,不一样就是椭圆。

复制代码
#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}


/*简写模式/*
#i1 {
  border: 2px solid red;   顺序无所谓 只要给了三个就行
}
复制代码

边框样式:

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
  • 显示方式display属性(用于控制HTML元素的显示效果。)

复制代码
'''
display:
what:控制标签在页面中的显示方式的属性
why:通过设置该属性的不同属性值,使其在页面中的显示方式达到设定的效果,且对于CSS的样式支持程度也不一样

display: inline ;
1.同行显示
2.只支持部分CSS样式(不支持宽高)
3.宽高由文本内容撑开


display:block ;
1.异行显示
2.支持所有CSS样式
3.设置了宽高就采用设置的值,宽高也就有默认的特性


display:inline-block;
1.同行显示
2.支持所有的CSS样式
3.设置了宽高就采用设置的值

总结:标签的显示方式就是用display属性控制
1.带有inline的就会同行显示,带有block的就会支持所有CSS样式
2.带有inline的都是与内容相关的标签,带有block的主要用来搭建架构的

嵌套关系:
页面架构就是由标签一层层嵌套关系形成的
嵌套关系有一定的规则:
1.inline-block类型不建议嵌套任意标签,所以系统的inline-block都设计成了单标签
2.inline类型只嵌套inline类型的标签
3.block类型可以嵌套任意类型标签(注:hn和p只建议嵌套inline类型标签)

结论:
1.inline嵌套block和inline-block,不起任何作用,所以只能嵌套inline
2.inline-block可以嵌套其他类型标签,但一定要结合vertical-align属性操作,左右还有一空格间距
'''
复制代码

  

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

盒子模型

盒模型由四部分组成:

margin(盒子与盒子之间的距离》外边距)、border(盒子的厚度》边框)、padding(内边距)、content(盒子内部内容)。

复制代码
'''
1.margin:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
2.border:边框,围绕在内边距和内容外的边框,样式/宽度/颜色(solid表示实线,dashed表示虚线,dotted表示点状线)
3.padding:内边距,用于控制内容与边框之间的距离,从显示角度控制文本的显示区域
4.content:内容区域,显示文本和图像,由宽 X 高组成

注意:
1.margin,padding:起始为上,顺时针依次赋值,不足边时去对边
2.要做到文本内移,设置padding,如果又想显示区域不变,相应减少content
'''
复制代码

 

 

 margin的用法

body标签默认自带8px的margin值,我们在编写页面之前应该去掉。

复制代码
.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

简写:

.margin-test {
  margin: 5px 10px 15px 20px;
}
复制代码

盒子模型页面布局:

标签的水平居中,可以使用固定搭配。

.mycenter {
  margin: 0 auto;
}

note:

复制代码
'''
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px      上、右、下 、左(顺时针)
margin: 1px 2px 3px          上 、左右 、下
margin: 1px 1px          上下、左右
margin: 1px               统一设置一个值
'''
复制代码

padding用法

padding用法与margin一致。

复制代码
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写:
.padding-test {
  padding: 5px 10px 15px 20px;
}
复制代码

浮动

在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

关于浮动的两个特点:

  • 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动造成的影响:浮动会造成父标签塌陷。

浮动的三种取值:

left:向左浮动

right:向右浮动

none:默认值,不浮动

解决浮动造成的影响:(清除浮动的副作用>>>父标签塌陷问题)

使用clear属性

clear属性规定元素的哪一侧不允许其他浮动元素。

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

clear属性只会对自身起作用,而不会影响其他元素。

主要有三种方式:

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

伪元素清除法(万能公式)

      .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }

 

posted @   *sunflower*  阅读(71)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示