css_随笔
1 css 基础语法：
2 派生选择器
li strong {
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
3 css id 选择器
3.1选择器用#来定义
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
3.2 id派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
html中虽然有id=sidebar的选项，但只有其中为<p>标签被样式了
3.3 基于类的单独选择器
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
4 css类选择器
4.1用一个. 来表示, 想当于*(通配符).
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
4.2 也可以用作派生
.fancy td {
color: #f60;
background: #666;
}
4.3 还可以用作基于类的选择
td.fancy {
color: #f60;
background: #666;
}
5 css属性选择器
5.1属性选择器
[title]
{
color:red;
}
5.2 属性和值的选择器
[title=W3School]
{
border:5px solid blue;
}
5.3 属性和多值的选择器
[title~=hello] { color:red; }
包含hello字符串的所有title标签都会被样式
6 css的创建
6.1外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
用到<link>标签
然后在mystyle.css中定义样式
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
6.2 内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
使用到<style>标签
7 伪类与伪元素
7.1 伪类，下面实例：
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head> <body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
对这个css进行解释：<p>的伪类first-child下的<i>标签会有样式，而这个first-child表示第一次出现的标签。总之就是省去了class属性
7.2 伪元素 下面实例：
p.article:first-letter
{
color: #FF0000;
} <p class="article">This is a paragraph in an article。</p>
这个html的表示在<p>标签下class='article'会有first-letter特点
css_随笔的更多相关文章
- AI人工智能系列随笔
初探 AI人工智能系列随笔:syntaxnet 初探(1)
- 【置顶】CoreCLR系列随笔
CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...
- C++随笔：.NET CoreCLR之GC探索（4）
今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...
- C++随笔：从Hello World 探秘CoreCLR的内部(1)
紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...
- ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
- 使用Beautiful Soup编写一个爬虫 系列随笔汇总
这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识 完成了一个简单的爬虫服务:从all ...
- 利用Python进行数据分析 基础系列随笔汇总
一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
随机推荐
- AngularJS入门教程
1. 简介:AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是 ...
- Error 1606 Could Not Access Network Location %SystemDrive%/inetpub/wwwroot/ 的错误解决方法
在卸载或者重安装Infragistics NetAdvantage时候提示如标题的错误 win7下 1.打开注册表 Regedit 2.找到HKEY_LOCAL_MACHINE/SOFTWARE/Mi ...
- C#中Abstract和Virtual的区别
c# 中 Abstract和Virtual比较容易混淆,都与继承有关,并且涉及override的使用.下面讨论一下二者的区别: 一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰 ...
- mac上安装ubuntu双系统
mac和ubuntu双系统 mac系统安装ubuntu双系统的方法, mac系统要安装ubuntu, 必须使用u盘作为启动盘, 在mac启动的时候引导mac安装ubuntu, 下面为详细的安装方法: ...
- 爬虫框架--webmagic
官方有详细的使用文档:http://webmagic.io/docs/zh/ 简介:这只是个java爬虫框架,具体使用需要个人去定制,没有图片验证,不能获取js渲染的网页,但简单易用,可以通过xpat ...
- Zabbix监控nginx-rtmp status（json版）
与前面的文章 zabbix监控nginx-rtmp status(html版)区别只在于取值的页面不一样 http://127.0.0.1:81/control/get/all_streams sta ...
- Linux创建WiFi热点
手机流量用完,需要开WiFi,由于是LinuxMint,感觉配置还算容易,找到一个不错的教程,收藏一下,以备后用.除了修改配置文件那步在我的电脑不需要外其他基本正确,而且Mint本来就衍生自Ubunt ...
- 【web开发 | 移动APP开发】 Web 移动开发指南（2017.01.05更新）
版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...
- python中文编码问题
第一步:在代码中输入以下命令,执行: #在Python中显示中文注释和输出中文a ="中文"print a 返回错误: d:\Python27\python.exe "D ...
- windows 下的sleep 命令
方法一 ping -n 3 127.0.0.1 > nul 其中3是需要sleep的秒数 方法二 timeout /t 3 /nobreak > nul 其中3是需要sleep的秒数