CSS3学习----选择器、字体
属性选择器:
[att*=val]{}若att元素属性值包括val指定字符,则使用该样式
[att^=val]{}若att元素属性值开头字符为val,则使用该样式
[att&=val]{}若att元素属性值结尾字符为val,则使用该样式
例:
<style type="text/css">
[id^=section1]{
background-color: yellow;
}
</style>
<div id="section2">演示样例文本2</div>
<div id="subsection1">演示样例文本1-1</div>
<div id="subsection2">演示样例文本1-2</div>
<div id="subsection2-1">演示样例文本2-1</div>
<div id="subsection2-2">演示样例文本2-2</div>
target选择器:
页面内href跳转时,又一次定义目标的属性
font字体:曾经的版本号网页中应用的特殊字体仅仅有在client有这个字体时候该字体才干正常显示,
而css3支持从server中获取字体,也就是说你把字体文件放到font目录,能够直接通过url使用这个字体
这一新的变化真的带来了非常大的便利。例:
@font-face{
font-family: WebFont;
src:url('font/FZJZFW.TTF') format("truetype");
font-weight: normal;
}
article{
font-family: WebFont;
}
<article>
<h1>文章内容</h1>
<p>网页级内容区块的正文</p>
<section>
<h3>section级内容的正文</h3>
<p>section级内容区块的正文</p>
</section>
</article>
CSS3学习----选择器、字体的更多相关文章
- [CSS3] 学习笔记-选择器详解(三)
1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...
- CSS3学习笔记(1)-CSS3选择器
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- css3学习文档
什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...
- css和css3学习
css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...
- CSS3 教程 选择器 标记一下防止 要找时404
客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418 CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...
- 我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- CSS3 ::selection选择器
一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...
随机推荐
- how to install git 1.8 rpm
git版本在低于1.8之前,对于私有项目会出现401的pull失败错误,只能通过升级git版本来解决 It appears that git18 is no longer available from ...
- Generative Learning algorithms
"generative algorithm models how the data was generated in order to categorize a signal. It ask ...
- cocos2d-x -------之笔记篇 动画的实现
cocos2d-x 动画的实现 一.实现原理 动画的实现其实就是使用一个完整的动作图片集来实现动画,达到动态的效果 动画动作类(CCAnimate)是加载一个动画类来实现动作. 动画类(CCAnima ...
- 继承CWnd自绘按钮
头文件: //头文件 #pragma once // CLhsButton #define MYWM_BTN_CLICK WM_USER+3001 //关闭按钮单击响应 //tab按钮的状态 enum ...
- 运行预构建 Linux 映像的 Windows Azure 虚拟机中的交换空间 – 第 1 部分
本文章由 Azure CAT 团队的 Piyush Ranjan (MSFT) 撰写. 随着基础结构服务(虚拟机和虚拟网络)近期在 Windows Azure 上正式发布,越来越多的企业工作负荷正在向 ...
- [LeetCode][Python]Add Two Numbers
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/add-two ...
- Rikka with Graph(联通图取边,暴力)
Rikka with Graph Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- Dyanmics CRM您无法登陆系统。原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已被禁用
当在操作CRM时,做不论什么的写操作包含创建数据.更新数据.都会提示以下截图中的错误:"您无法登陆系统.原因可能是您的用户记录或所属的业务部门在Microoft Dynamics CRM中已 ...
- springMvc 支持hibernate validator
SpringMVC 支持Hibernate Validator 发表于9个月前(2014-08-04 11:34) 阅读(1780) | 评论(0) 11人收藏此文章, 我要收藏 赞0 5月23日 ...
- opacity在IE6~8下无效果,解决的办法
opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...