编程的尽头是CSS

编程的尽头是CSSCSS是网页界的时尚教父,负责把HTML页面装扮得美轮美奂。通过CSS,你可以让网站变得更加生动、具有吸引力和独特性,而且还能提升用户体验,吸引更多的流量。这就像是一场华丽的服饰秀,你可以在其中穿梭

上面图片,下面文字

<li><a href=""><img src="" alt=""><p></p></a></li>

在a标签里面,href=‘javascript:;’

首先:<a> 标签中必须提供 href 属性 但是这个就出现了一个问题,如果我不想让他跳转,那么这个时候href应该怎么赋值。有三种方法:

  1. href=‘javascript:;’代表的是发生动作时执行一段javascript代码,但是这个代码是空的,所以什么也不执行
  2. href = ‘’:代表的是什么也不执行,但是用这种,动作发生之后,会刷新页面。
  3. href=‘#’: 代表的同样是什么也不执行,但是用这种,动作发生之后,会自动跳转到页面顶端。
<a id="a1" href="">111</a>
<a href="#a1">111</a> //能跳转到id 为a1的标签地方去  
<a  href="#a2">111</a>
<a id="a2" href="">111</a>
<img src="" alt="钢铁侠">  
//alt一个是图片加载失败时显示的描述信息,一个是在搜索引擎搜索时可以找到他 ,比如在浏览器搜索钢铁侠
//图片只设置一个宽或高,另一个会等比例缩放,不会让图片变形

直接设置行高就可以操作文字

<div class="box"></div>
.box {
   width: 0;
   height: 0;
   border : 50px solid transparent;
   border-left: 50px solid red;
}
  • 去除行内块间隙
  • 父元素设置font-size:0
  • 子元素在单独设置字体大小

直角三角形

.box {
   width: 0;
   height: 0;
   border-color: transparent   red  transparent transparent ;
   border-style: solid ;
   border-width: 18px 10px 0 0;
}

css初始化

  • 盒子模型box-sizing
  • 标准盒模型 box-sizing: content-box (默认值)
  • 该模式下设置的宽高只是内容宽高,不包括内边距、边框,会被内容撑大
  • IE盒模型、怪异盒模型 box-sizing: border-box
  • 该模式下设置的宽高包括内容宽高,内边距、边框,不会被撑大可以在css中设置通配符
{box-sizing: border-box;}

结构伪类选择器

  1. E :nth-child() 选择父元素中的E元素 括号里面可以是数字 关键字 even odd 还可以公式 n 从0开始 没有的会忽略 n是全选,2n是偶 2n+1是奇数,5n是第五个第十个 选择5的倍数 ,n+5 是从第五个开始选 -n+5 是选择前五个
  2. E :nth-child(1) 会将父元素中所有child 先排序 然后先看的是nth-child(1)第一个child Z再去看是不是 E 如果不是,则选择器失效
  3. E:nth-of-type() 会将指定E类型的child进行排序 再从中选取括号中传递的数的child
  4. element::before{} 伪元素选择器 是通过CSS创建出来的行内元素 在原有的html代码(文档树)中是看不见标签的 所以叫伪元素 必须有个content:‘’;
  5. beforeafter 都是属于element,是element的子元素 是在其内部的 ,是在element内容前面和后面进行操作的,还是在element内部

clear 与 clearfix

clear 只能是新建一个空标签 给其加上类clear,而且这个空标签只能放在浮动元素的最后<div class="clear"></div> 紧挨着最后一个浮动元素后面 例如:

<ul>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <div class="clear"></div>
</ul>

clearfix 加在父元素上 在父元素的内容最后清除浮动 当第一排要求浮动,第二排不浮动,第三排要求浮动时,只能使用clear, 例如:

<ul class="clearfix">
    <li>
       <a href=""></a>
    </li>
    <li>
       <a href=""></a>
    </li>
    <li>
       <a href=""></a>
    </li>
</ul>

优先级权重:

继承 <类(class=""),伪类< id(id="gl") < style(style="") < !important

#gl{  id前面加#设置css
}
div {
     color: red  !important;  这个优先级最高
}
  • 复合的权重会叠加 永远不会有进位
  • 10个0001叠加成000,10 不是0010
  • ul li 是0001+0001
  • li 是 0001
  • ul li { color: red;}
  • li {color: pink;} 显示效果一定是红色 不论先后顺序 不会覆盖掉样式 因为权重叠加了

子元素字体的属性会默认继承父元素的设置

浮动以后具有行内块特性 inline-block
比如:

  1. 颜色(color)
  2. 大小(font-size)
  3. 行高(line-height)
  4. 缩进(text-indent)
  5. 对齐(text-align)
    例外 a的颜色(超链接的颜色不会继承)

伪类:

  1. a:link 未被访问的链接
  2. a:visited 被访问过的链接
  3. a:hover 鼠标经过时
  4. a:active 正在按下鼠标还没有弹起
  5. input:focus 谁获得光标,就对谁设置

background-attachment:scroll 默认随屏幕滚动
background-attachment:fixed 背景图像固定

一般顺序:

background:背景颜色 背景图片地址 背景图片平铺 背景图片滚动 背景图片定位

fontfont-style(斜体)  
font-weight   
font-size/line-height   
font-family

font 属性联写注意:

  1. 一定要包括font-size font-family这两项
  2. font-size 一定要在 font-family 前面
`font:12px/1.5 '微软雅黑';`  //字体大小是12px  子元素行高是子元素字体大小的1.5

嵌套块元素垂直外边距的坍塌

子元素和父元素同时设置了margin-top值 则父元素会坍塌,达不到设置效果

解决方案:

1.为父元素设置上边框

border: 1px solid transparent` // 1px的透明实线边框 transparent 透明的

2.为父元素定义上内边距padding: 1px;
3.为父元素添加overflow:hidden 不增加盒子大小
4.行内块元素之间是有默认间距的,不会紧挨在一起 设置浮动可以解决间隙问题

复合操作

ul>(li>a+p)*3
效果如下:

<ul>
   <li>
     <a href=""></a>
     <p></p>
   </li>
   <li>
     <a href=""></a>
     <p></p>
   </li>
   <li>
      <a href=""></a>
      <p></p>
    </li>
</ul>
  • display: none元素隐藏,不再占有原来的位置
  • visibility: hidden元素隐藏,继续占有原来的位置
  • overflow: hidden将溢出的部分隐藏起来,没有删除
  • overflow: scroll显示滚动条
  • overflow: auto在需要的时候显示滚动条

单行溢出文字显示省略号

white-space: normal  默认自动换行  空白处理<br/>
white-space: nowrap   先强制不换行 wrap 释义换行 <br/>
overflow: hidden  再将溢出的部分隐藏起来<br/>
text-overflow: ellipsis 最后将文本溢出部分转化为省略号

多行溢出文字显示省略号 受浏览器影响

overflow: hidden  
text-overflow: ellipsis
display: -webkit-box; 弹性伸缩盒子模型
-webkit-line-clamp: 2; 想让第二行显示省略号 限制在块元素显示的文本行数 控制盒子大小
-webkit-box-orient: vertical; 设置或检索伸缩盒子对象的子元素的排列方式 

css 过渡

transform : rotate(360deg)// 360deg = 400grad   =  1turn  旋转 如果想自然点 加如下;
transition: transform 2s;
transitionall 2s;
transition: width 2s,height 5s;
transition 过渡 在两秒内完成
transform : translate(20px,20px) 向x方向平移了20px  向y方向平移了20px  移动轨迹是他们的合力
transform : scale(0.5,2) 水平方向缩小到原来1/2,垂直方向放大到原来2倍
transform : skew(20deg,10deg) 倾斜
transition-origin 旋转的原点
transition-origin:top; 上边框中点
transition-origin:right;右边框中点
transition-origin:bottom;下边框中点
transition-origin:left;左边框中点
transition-origin:top left; 左上角
transition-origin:top right; 右上角
transition-origin:bottom left; 左下角
transition-origin:bottom right;右下角

当表单中的文本框被选中后,有个其他颜色的边框 想要去掉ta

outline: none 或者 0
input,textarea{
   outline: none;
}

input属性 placeholder 更改字体颜色

input::placeholder{
       color:pink;
       }
  • input 属性 requied 该框必填
  • input 属性 autofocus 当刷新页面时,表单自动获得光标
  • input 属性 autocomplete off/on 获得历史输入记录 要有name属性
  • input 属性 multiple 多文件上传

文本域右下角是能够拖放大小的 不想被拖放

resize: none; 文本域尽量放一行   要不然容易有空格间隙
textarea{
     resize: none;
} 

css 属性选择器

  • E[att] 选择具有att 属性的E 元素
  • E[att=“val”] 选择具有att 属性且值=val的E 元素
  • E[att^=“val”] 选择具有att 属性且值以val开头的E 元素
  • E[att$=“val”] 选择具有att 属性且值以val结尾的E 元素
  • E[att*=“val”] 选择具有att 属性且值包含val的E 元素

字体图标

1.下载图标压缩包
2.将其中的fonts文件夹放到文件的根目录下
3.在需要使用字体图标的页面中引用

@font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?61czyp');
            src: url('fonts/icomoon.eot?61czyp#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?61czyp') format('truetype'),
                url('fonts/icomoon.woff?61czyp') format('woff'),
                url('fonts/icomoon.svg?61czyp#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
           }

4.在使用字体图标的标签.声明字体图标例如span{font-family: 'icomoon';}
如果字体图标不够用,将压缩包中的selection.json文件在图标网左上角 import icons上传 选择好图标后 下载新 的压缩包即可,将之前的压缩包删除

  • cursor 鼠标样式
  • cursor: default 一个箭头
  • cursor: pointer 一个小手
  • cursor: move 一个十字箭头
  • cursor: not-allow 一个圆圈里面一根斜线 禁止

表单属性不可输入

  • disabled(连点击都失效) readonly
  • js设置 btn.disabled = false 关闭了disabled就是可用了
  • btn.disabled = true, 开启了disabled就是不可用了
  • 同理还有 复选框 checked 下拉框 selected

vertical-align // 只对行内元素和行内块元素生效 设置图片和文字的对齐方式

vertical-aligntop line //顶线 一行文字字母最大的高度
vertical-align :middle line //中线 一行文字字母中间的高度
vertical-align :base line //基线 一行文字字母大部分相同的高度
vertical-alignbottom line //底线 一行文字字母最低的高度

今天的文章编程的尽头是CSS分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16955.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注