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_随笔的更多相关文章

  1. AI人工智能系列随笔

    初探 AI人工智能系列随笔:syntaxnet 初探(1)

  2. 【置顶】CoreCLR系列随笔

    CoreCLR配置系列 在Windows上编译和调试CoreCLR GC探索系列 C++随笔:.NET CoreCLR之GC探索(1) C++随笔:.NET CoreCLR之GC探索(2) C++随笔 ...

  3. C++随笔：.NET CoreCLR之GC探索（4）

    今天继续来 带大家讲解CoreCLR之GC,首先我们继续看这个GCSample,这篇文章是上一篇文章的继续,如果有不清楚的,还请翻到我写的上一篇随笔.下面我们继续: // Initialize fre ...

  4. C++随笔：从Hello World 探秘CoreCLR的内部(1)

    紧接着上次的问题,上次的问题其实很简单,就是HelloWorld.exe运行失败,而本文的目的,就是成功调试HelloWorld这个控制台应用程序. 通过我的寻找,其实是一个名为TryRun的文件出了 ...

  5. ASP.NET MVC 系列随笔汇总[未完待续……]

    ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...

  6. 使用Beautiful Soup编写一个爬虫 系列随笔汇总

    这几篇博文只是为了记录学习Beautiful Soup的过程,不仅方便自己以后查看,也许能帮到同样在学习这个技术的朋友.通过学习Beautiful Soup基础知识 完成了一个简单的爬虫服务:从all ...

  7. 利用Python进行数据分析 基础系列随笔汇总

    一共 15 篇随笔,主要是为了记录数据分析过程中的一些小 demo,分享给其他需要的网友,更为了方便以后自己查看,15 篇随笔,每篇内容基本都是以一句说明加一段代码的方式, 保持简单小巧,看起来也清晰 ...

  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. IT培训行业揭秘（一）

    最近一个多月来,身边有很多朋友问我,我家孩子明年就要大学毕业了,现在工作还没有着落,最近孩子回家经常和我说,他们学校最近来了很多IT培训班,让同学们参加培训,然后各个培训班动辄拿出往届他们的培训学生赚 ...

  2. Intellij IDEA 快捷键

    Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 ...

  3. 【WPF】Combobox指定选中值用selectedValue不是很灵的时候，

    wpf combobox 指定选中的值,前题,combobox是通过数据库绑定的ItemsSource:所以再指定的时候用selectValue不是很成功!我的解决方法是 生成一个字典,办值和索引对应 ...

  4. 一次xbuild编译失败的排查

    今天一个待上线服务测试完毕,需要构建CI,按照模板配置好包还原,xbuild编译,报错,错误信息如下: EtcdRegister.cs(8,15): error CS0234: The type or ...

  5. mui 下拉刷新

    mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta chars ...

  6. 净捡软柿子捏--jQuery 遍历方法

    ---------------------------------------------add()------------------------------------------ jquery. ...

  7. 深入浅出 Redis client/server交互流程

    综述 最近笔者阅读并研究redis源码,在redis客户端与服务器端交互这个内容点上,需要参考网上一些文章,但是遗憾的是发现大部分文章都断断续续的非系统性的,不能给读者此交互流程的整体把握.所以这里我 ...

  8. GIT分布式版本控制系统

    Git诞生历史 我想大家还记得Linus torvalds在1991年时发布了Linux操作系统吧,从那以后Linux系统变不断发展壮大,因为Linux系统开源的特性,所以一直接受着来自全球Linux ...

  9. Windows常用快捷方式

    总结了其他常用的快捷方式: Ctrl+C 复制 . Ctrl+V粘贴. Ctrl+X剪切. Delete删除. Alt+Tab 应用程序切换 Ctrl+Alt+Delete  Ctrl+shift+E ...

  10. matlab画图函数plot()/set/legend

    简单plot()/legend/XY轴范围axis 除了坐标轴信息外还可以添加其它的信息,如所画曲线的信息等:测试代码如下 x=0:pi/20:2*pi; y1=sin(x); y2=cos(x); ...