一些css新增的知识

chuanzi      2022-02-14     292

关键词:

1、CSS引用文件字体

准备工作:将字体文件解压放于fonts文件夹中,字体文件通常有eot、svg、ttf、woff四种格式

CSS声明字体引用:

@font-face {
    font-family: test;
    src: url(‘../fonts/test.eot‘) format(‘embedded-opentype‘),
    url(‘../fonts/test.svg‘) format(‘svg‘),
    url(‘../fonts/test.ttf‘) format(‘truetype‘),
    url(‘../fonts/test.woff‘) format(‘woff‘);
}

CSS设置字体为文件字体:

.example{
    font-family: test;
    font-style: normal;
}

假如使用的是字体图标,字体图标会有自己的编码,如果把字体图标放在伪元素中,则代码如下:

.example::before{
    content: ‘e958‘; //字体图标编码作为伪元素的内容
    font-size: 13px;
}

2、CSS选择器巧用

2.1、使用兄弟选择器

假如ul中并排的n个块级元素li,要设置相邻元素的间隔线,可使用以下代码:

//相邻兄弟选择器选择紧接在另一个元素后的元素,而且二者有相同的父元素,会循环查找
ul>li+li{
    border-left:1px solid #ccc;
}
//通用兄弟选择器选择指定元素的后面的所有兄弟结点,该情景下相邻兄弟选择器性能较好
ul>li~li{ border-left:1px solid #ccc; }

2.1、使用属性选择器

假如要匹配使用了test-开头的类,如class="test-1"、class=" test-2"、class="start  test-3"...使用以下代码以匹配多种情况

[class^="test-"],[class*=" test-"]{
     ···      
}

 

关于jquery的css的一些知识

...选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似$("li").css("cursor","pointer");这样的方式来确定具体的大家就看代码吧css样式表一body{background:#000;color:#fff}h1{font-size:14px;color:#fff;font-weight:bold;}p{font- 查看详情

html与css的一些知识

  续:    line-height  用于设置一行文本行高,一般用于文本的垂直居中;    display  用于设置元素的显示方式    float  浮动,让元素漂浮起来排列      浮动的影响:        a.浮动后... 查看详情

h5新增form控件和表单属性

... button  按钮  submit  提交按钮以上是我们常用的一些form属性第二个知识点:H5新的输入型控件  (一)email:电子邮箱文本框,跟普通的没什么区别  1.当 查看详情

css中border的一些知识

 在编写页面代码时,经常会用到元素的边框括弧:border 给某个元素增加一个1px的实线黑色边框:html代码部分1<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/j 查看详情

html与css的一些知识

...己要找的东西在哪里。还有命名也要见名知意。  再说一些HTML相关:  1、标签分类:       a、块级标签:<div></div><h1></h1><p></p>  css: 查看详情

css3新增的属性有哪些

...准。CSS3新增了很多的属性,下面一起来分析一下新增的一些属性:  1.CSS3边框:border-radius:CSS3圆角边框。在CSS2中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在CSS3中,创建圆角是非常容易的,在CSS3中,bor... 查看详情

css盒模型的一些知识

垂直居中指南在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前,先逐个询问自己以下几个问题,直到找到合适的解决办法。1.可以用一个自然高度的容器吗?给容器加上相等的上下内边距让内容居中。2... 查看详情

css3新增的属性以及使用

 Css3基础操作  .Css3? css3事css的最新版本 width.heith.background.border**都是属于css2.1CSS3会保留之前CSS2.1的内容,只是添加了一些新的语法。CSS3:border-radius:nth-of-type()background-size** ##1.transition过渡 查看详情

《html5与css3权威指南》知识整理

《HTML5与CSS3权威指南》知识点整理(1) 1、新增标签 新增语义化标签。<header> 定义 section 或 page 的页眉。<nav>定义导航链接。<footer> 定义 section 或 page 的页脚<secti 查看详情

pe知识复习之pe新增节

             PE知识复习之PE新增节一丶为什么新增节.以及新增节的步骤    例如前几讲.我们的PE文件在空白区可以添加代码.但是这样是由一个弊端的.因为你的空白区节属性可能是只读的不能执行.如果你修... 查看详情

css你可能还不知道的一些知识点

一、特殊选择器1、*用于匹配任何的标记2、>用于指定父子节点关系3、E+F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F4、E~F匹配所有E元素之后的同级元素F5、名称[表达式]5.1 E[att] 匹配所有具有att属性的E元... 查看详情

less的一些基本知识

    less的基本知识LESS是动态的样式表语言,通过简洁明了的语法定义,使编写CSS的工作变得非常简单。其实less就是定义了另一种规则,添加了变量,混合(函数)等等,然后通过额外编译器来根据这种规则来编译... 查看详情

umlchina建模竞赛题答案及解析(新增试卷7-9套解析)

建模竞赛题比起《软件方法》书中的题目要更难一些,可以作为熟悉了《软件方法》中的基本知识之后的进一步练习。题目颇有些陷阱,应一些同学的要求,挑部分题目给出答案并详细讲解,知识点其实都在书中。同时为了避免... 查看详情

前端需要哪些知识?

...础;CSS过渡;HTML5语义化标签;线性渐变,径向渐变;HTML新增标签属性;CSS动画Animation;表单项新增属性;弹性盒模型;CSS选择器;经典布局练习(双飞翼,CSS3伪类 品字布局)+案例;CSS伪元素;响应式布局第二阶段JavaScriptJava... 查看详情

移动h5开发入门知识,css的单位汇总与用法

...行,webapp和hybridapp的开发,都用到了css3技术,在css3中,新增了许多单位,rem、vw和vh、vmin和vmax、ch和ex等等,那现在对这些单位分别做一下详细的介绍吧。1、em做前端的应该对em不陌生,不是什么罕 查看详情

一些知识的网址

1.html特殊字符的html,js,css写法汇总:http://www.cnblogs.com/starof/p/4718550.html2.::before和::after伪元素的用法:http://www.cnblogs.com/keyi/p/5943133.html3.YFCMF轻量级企业网站管理系统: https://github.com/yangchaogit/YFCMF& 查看详情

css基础知识

...通过上图,我们可以发现,css的内容量不是很多。只要花一些时间,还是可以全部记住的,下面是我为大家具体的分类。文字样式    line-height:行高   letter-spacing:字间距 &n 查看详情

css知识点总结(代码片段)

记录了CSS常用的属性,以及一些基础知识点.CSS知识点总结文章内容可能较多且杂乱,可以查看页面右方的目录,以及使用Ctrl+F搜索页面内容进行内容定位。常用属性推荐搭配文档使用,可以复制属性名,到文档查看该属性对应... 查看详情