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> ...
随机推荐
- codeforces 659C . Tanya and Toys 二分
题目链接 将给出的已经有了的排序, 在前面加上0, 后面加上1e9+1. 然后对相邻的两项判断. 如果相邻两项之间的数的和小于m, 那么全都选上, m减去相应的值. 如果大于m, 那么二分判断最多能选 ...
- [Python]豆瓣用户读书短评下载工具
简介 朋友问我能不能做一个下载他在豆瓣读书上的短评的工具,于是就做了这个“豆瓣用户读书短评下载工具”. GitHub链接:https://github.com/xiaff/dbc-downloader ...
- 20.org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1
org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actua ...
- ORACLE-Kill 杀死正在执行的Oracle存储过程和死锁语句
ORACLE-Kill 杀死正在执行的Oracle存储过程和死锁语句 存储过程 1.找到正在执行的存储过程的 sid ,serial# select b.sid,b.SERIAL#,a.OBJEC ...
- cad实时平移快捷键
1.按住鼠标滚轮,光标变成小手工具,可拖动画布 2.键盘按 p,光标变成小手工具
- SD和SDHC和SDXC卡的区别是什么
SD卡,SDHC卡,SDXC卡区别在规格不一样,SD卡最大支持2GB容量,SDHC 最大支持32GB容量,SDXC 最大支持2TB(2048GB)容量,支持SDXC卡的数码设备是兼容支持SD卡与SDH ...
- Android 检测SD卡应用
Android 检测SD卡应用 // Environment.MEDIA_MOUNTED // sd卡在手机上正常使用状态 // ...
- poj1936---subsequence(判断子串)
#include<stdlib.h> #include<stdio.h> int main() { ],t[]; char *p1,*p2; while(scanf(" ...
- linux安装php遇到的问题
第一个问题:configure: error: libjpeg.(a|so) not found 很多人都纳闷儿了,我都安装了的,为什么就找不到呢?找不到其实就应试想到它的搜索位置里面是没有的,要不然 ...
- HTML之学习笔记(三)文本标签
标题标签 html的标题标签从h1~h6共六个级别,权值不断降低,即不断变小,不用使用CSS控制来取代h标签,因为网页搜索引擎通过搜索到你的页面,找到你页面的h标签并为h标签建立索引,如果h标签被替代 ...