css概念及作用

css即层叠样式表的英文缩写

作用：1 渲染页面   2 页面布局

css语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

  1. 格式：
  2.  
  3. selector{
  4.  
  5. 　　property: value;
  6.  
  7. 　　property: value;
  8.  
  9. 　　property: value
  10.  
  11. }

示例及详解

h1 {color:red; font-size:14px;}

css注释

  1. /*单行注释*/ 
  1. /*
    多行注释
    多行注释
    */

引入css的方式

1 行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

  1. <p  style="background-color：yellow">hello  css</p>

2.嵌入式(内部样式)

将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

  1. <head>
  2.  
  3. 　　<meta charset="utf-8">
  4.  
  5. 　　<title></title>
  6.  
  7. 　　<style>
  8.  
  9. 　　　　p{
  10.  
  11. 　　　　　　background-color：green;
  12.  
  13. }
  14.  
  15. 　　</style>
  16.  
  17. </head>

3.连接式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

  1. <link  href="mystyle.css"  rel="stylesheet"  type="text/css">

css选择器(查找标签)

基本选择器

　　　　

注意：在类选择器中：

　　样式类名不要用数字开头（有的浏览器不识别）。

　　标签中的class属性如果有多个，要用空格分隔。

组合选择器

　　后代选择器

  1. /*li内部的a标签设置字体颜色*/
  2. li a {
  3.   color: green;
  4. }

　　子代选择器

  1. /*选择所有父级是 <div> 元素的 <p> 元素*/
  2. div>p {
  3.   font-family: "Arial Black", arial-black, cursive;
  4. }

　　毗邻选择器

  1. /*选择所有紧接着<div>元素之后的<p>元素*/
  2. div+p {
  3.   margin: 5px;
  4. }

　　兄弟选择器

  1. /*i1后面所有的兄弟p标签*/
  2. #i1~p {
  3.   border: 2px solid royalblue;
  4. }

属性选择器

  1. /*用于选取带有指定属性的元素。*/
  2. p[title] {
  3.   color: red;
  4. }
  5. /*用于选取带有指定属性和值的元素。*/
  6. p[title=""] {
  7.   color: green;
  8. }
  1. /*找到所有title属性以hello开头的元素*/
  2. [title^="hello"] {
  3.   color: red;
  4. }
  5.  
  6. /*找到所有title属性以hello结尾的元素*/
  7. [title$="hello"] {
  8.   color: yellow;
  9. }
  10.  
  11. /*找到所有title属性中包含（字符串包含）hello的元素*/
  12. [title*="hello"] {
  13.   color: red;
  14. }
  15.  
  16. /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
  17. [title~="hello"] {
  18.   color: green;
  19. }

属性选择器不常用的原因

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：
  1. div, p {
  2.   color: red;
  3. }

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:
  1. div,
  2. p {
  3.   color: red;
  4. }
嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

  1. .c1 p {
  2.   color: red;
  3. }

伪类选择器

  1. /* 未访问的链接 */
  2. a:link {
  3.   color: #FF0000
  4. }
  5.  
  6. /* 已访问的链接 */
  7. a:visited {
  8.   color: #00FF00
  9. } 
  10.  
  11. /* 鼠标移动到链接上 */
  12. a:hover {
  13.   color: #FF00FF
  14. } 
  15.  
  16. /* 选定的链接 */
  17. a:active {
  18.   color: #0000FF
  19. }
  20.  
  21. /*input输入框获取焦点时样式*/
  22. input:focus {
  23.   outline: none;
  24.   background-color: #eee;

伪元素选择器

first-letter

常用的给首字母设置特殊样式：

  1. p:first-letter {
  2.   font-size: 48px;
  3.   color: red;
  4. }

before

  1. /*在每个<p>元素之前插入内容*/
  2. p:before {
  3.   content:"*";
  4.   color:red;
  5. }

after

  1. /*在每个<p>元素之后插入内容*/
  2. p:after {
  3.   content:"[?]";
  4.   color:blue;
  5. }

before和after多用于清除浮动。

选择器的优先级

　　css继承关系

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

body{color：red;}       <p>hello css</p>

这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

p{color：green;}

发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。　

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

  1. div{
  2.   border:1px solid #222
  3. }
  4.  
  5. <div>hello <p>yuan</p> </div>

css的优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高               style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

  1.       、文内的样式优先级为1,,,，所以始终高于外部定义。
  2.  
  3. 　　、有!important声明的规则高于一切。
  4.  
  5. 　　、如果!important声明冲突，则比较优先权。
  6.  
  7. 　　、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
  8.  
  9. 　　、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

优先级排序

窗口切分

pycharm中当前运行的程序右键点击Movright即可

css初始的更多相关文章

  1. CSS - 初始值、指定值、计算值、应用值、实际值

    初始值:未提供指定值且未从父元素指定值继承的 CSS 属性的值. 指定值:通过直接声明或 CSS 属性的值. 计算值:通过需要计算得到的值,如,继承和相对的尺寸.(注意:有些计算要等到布局确定才能进行 ...

  2. 给自己保存份CSS初始值样式

    @charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,text ...

  3. css 初始包含块

    continuous media ,paged media 关于continuous media[连续媒体]和paged media[分页媒体] 直白的讲,continuous和paged media ...

  4. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

  5. 关于CSS引入方式的详细见解

    关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...

  6. 使用CSS实现无滚动条滚动

    我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...

  7. CSS 初识

    一.CSS 发展历程 从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性. 随着HTML的成长,为了满足页面设计 ...

  8. 2.1.3- 体会css样式

    css初始 css样式规则 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 【翻译】浏览器渲染Rendering那些事：repaint、reflow/relayout、restyle

    原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“R”吓到?今天,我们来讨论一下浏览器的渲 ...

随机推荐

  1. Tomcat虚拟根目录与虚拟目录

    tomcat版本:apache-tomcat-7.0.42 参考:http://blog.csdn.net/pangdingshan/article/details/7214786 一.虚拟根目录 1 ...

  2. git 更新远程分支列表

    git remote update origin --prune git remote update origin -p

  3. Java中的内存泄露的几种可能

    Java内存泄漏引起的原因: 内存泄漏是指无用对象(不再使用的对象)持续占有内存或无用对象的内存得不到及时释放,从而造成内存空间的浪费称为内存泄漏. 长生命周期的对象持有短生命周期对象的引用就很可能发 ...

  4. Qt中三种解析xml的方式

    在下面的随笔中,我会根据xml的结构,给出Qt中解析这个xml的三种方式的代码.虽然,这个代码时通过调用Qt的函数实现的,但是,很多开源的C++解析xml的库,甚至很多其他语言解析xml的库,都和下面 ...

  5. 模拟SQL用户 EXECUTE AS USER

    EXECUTE AS USER= @domain SELECT SUSER_NAME(), USER_NAME(); REVERT 以下语句可以模拟SQL用户,具体使用场景自行脑补.

  6. error C4996: 'sprintf': This function or variable may be unsafe.

    error C4996: 'sprintf': This function or variable may be unsafe.   error C4996: 'sprintf': This func ...

  7. mysql数据库优化（四）-项目实战

    在flask项目中,防止随着时间的流逝,数据库数据越来越多,导致接口访问数据库速度变慢.所以自己填充数据进行测试及 mysql优化 1.插入数据: 通过脚本,使用多进程,每100次提交数据 impor ...

  8. Oracle导出表数据与导入表数据dmp，以及导入导出时候常见错误

    使用DOS 操作界面导出表数据,导入表数据(需要在数据库所在的服务器上边执行) exp UserName/Password@192.168.0.141/orcl   file=d:\xtables.d ...

  9. Servlet的几个关键知识点

    1.ServletConfig ServletConfig是Servlet的配置文件.对应于web.xml中的<servlet></servlet>标签.ServletConf ...

  10. easyui增删改查前段代码

    <script> var url; //添加用户窗体 function newUser() { $('#dlg').dialog('open').dialog('setTitle', '学 ...