CSS

简介

层叠样式表(英语:Cascading Style Sheets,简写CSS)一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

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

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

详情请参阅维基百科或者百度百科

引入方式

行内式

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

<p style="background-color: red">Hello World</p>

嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

导入式

将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中

<style type="text/css">
  
          @import"mystyle.css"; 此处要注意.css文件的路径
  
</style>

链接式(推荐使用)

将一个.css文件引入到HTML文件中

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

注意:为什么推荐使用链接式引入css渲染html而不是导入式

导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点

CSS选择器

基本选择器

*         匹配所有标签
 
E        匹配标签(E为何种标签)
 
.info    匹配class对应值为info的标签
 
E.info   匹配标签E class对应值为info的标签
 
#info    匹配id对应值为info的标签
 
E#info   匹配标签E id对应值为info的标签
 
注意:id的值是唯一的

组合选择器

E, F     # 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
 
E F      # 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
 
E > F    # 子元素选择器,匹配所有E元素的子元素F(隔代无效果)
 
E + F    # 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 

属性选择器

E[att]        # 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)   p[title]
 
E[att=val]    # 匹配所有att属性等于“val”的E元素
 
E[att~=val]   # 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
 
E[attr^=val]  # 匹配属性值以指定值开头的每个元素
 
E[attr$=val]  # 匹配属性值以指定值结尾的每个元素
 
E[attr*=val]  # 匹配属性值中包含指定值的每个元素

伪类与伪元素选择器

css引入伪类和伪元素概念是为了格式化文档树以外的信息。

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

伪类选择器:

a:link()           没有接触过的链接 用于定义了链接的常规状态。
 
a:hover()         鼠标放在链接上的状态 用于产生视觉效果。

transition-duration: 0.4s; 通过这条css代码可以渲染浮动速度 a:visited 访问过的链接 用于阅读文章,能清楚的判断已经访问过的链接。 a:active 在链接上按下鼠标时的状态 用于表现鼠标按下时的链接状态。

伪元素选择器示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
    p:first-letter {color:red;}
    </style>
</head>
<body>
<p>Hello World, and wish you have a good day!</p>
</body>
</html>

伪元素选择器示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
      li:first-child{color: red;}
    </style>
</head>
<body>
<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>
</body>
</html>

示例效果:

Hello World, and wish you have a good day!

 

  • 我是第一个
  • 我是第二个

伪元素使用单冒号还是双冒号:

CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而,除了少部分伪元素,如::backdrop必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题,w3c标准中的描述如下:

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of

backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是:虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,我们建议你在目前还是使用单冒号的写法。

实际上,伪元素使用单冒号还是双冒号很难说得清谁对谁错,你可以按照个人的喜好来选择某一种写法。

选择器例子例子描述
.class .intro 选择 class="intro" 的所有元素。
#id #firstname 选择 id="firstname" 的所有元素。
* * 选择所有元素。
element p 选择所有 <p> 元素。
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。
element element div p 选择 <div> 元素内部的所有 <p> 元素。
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
[attribute] [target] 选择带有 target 属性所有元素。
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。
:focus input:focus 选择获得焦点的 input 元素。
:first-letter p:first-letter 选择每个 <p> 元素的首字母。
:first-line p:first-line 选择每个 <p> 元素的首行。
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。

 

了解更多请参考关于伪类与伪元素的文章:总结伪类与伪元素

CSS优先级和继承

继承

继承可以这样理解:后代的元素使用祖先的CSS样式,但是继承的优先级非常低,任何显示申明的规则都可以覆盖其继承样式。

注意:CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。 

优先级

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


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

  1. 内联样式表的权值最高                        style=""--------1000;
  2. 统计选择符中的ID属性个数                 #id ----------100
  3. 统计选择符中的CLASS属性个数        .class ---------10
  4. 统计选择符中的HTML标签名个数       p ----------- 1

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

当存在一个id 多个class类似的情况,这时候不需要相加比较,就是id权重最高。

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

CSS常用属性

颜色color

<div style="color:blueviolet">hello lcg</div>
  
<div style="color:#ffee33">hello lcg</div>
  
<div style="color:rgb(255,0,0)">hello lcg</div>
  
<div style="color:rgba(255,0,0,0.5)">hello lcg</div>

CSS颜色16进制值

字体font

font - size: 20px / 50 % / larger                 字体大小
  
font - family: 'Lucida Bright'                    字体种类
 
font - weight: lighter / bold / border /          字体粗细

<h1 style="font-style: oblique">斜体</h1>          字体样式

背景属性background

background-color: cornflowerblue               # 背景色   
  
background-image: url('1.jpg');                # 背景图url
 
background-size: 40% 100%;                     # 背景大小
 
background-repeat: no-repeat;(repeat:平铺满)
 
background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)
 
<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
 
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
 
注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。

一张图片满屏设置

.contents{
    position:fixed;
    height: 100%;
    width: 100%;

}
img{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

text-align水平对齐方式

text-align属性规定元素中的文本的水平对齐方式。

 

  • left 把文本排列到左边。默认值:由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。

文本其他属性

font-size: 10px;      字体大小为10像素
 
text-align: center;   居中
 
line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
 
vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
 
 
text-indent: 150px;                 首行缩进
text-transform: capitalize;         文本单词首字母大写
                none                默认。定义带有小写字母和大写字母的标准的文本。
                capitalize          文本中的每个单词以大写字母开头。
                uppercase           定义仅有大写字母。
                lowercase           定义无大写字母,仅有小写字母。
                inherit             规定应该从父元素继承 text-transform 属性的值。
                 
text-shadow: 5px 5px 5px #FF0000;   文本阴影 水平阴影、垂直阴影、模糊距离,以及阴影的颜色
letter-spacing: 10px;               字符间距
word-spacing: 20px;                 英文单词间距

vertical-align 垂直高度

  <style>
        #i1{vertical-align: bottom;}
    </style>
<div>这日子没发过了<img src="riz.png" alt="" id="i1"></div>

border边框属性

box-shadow:10px 10px 5px #888888;         边框阴影 添加一个或多个阴影
 
border-style: solid;          边框样式
 
border-color: chartreuse;     边框颜色
 
border-width: 20px;           边框宽度
 
border-radius: 3px;           圆角边框
 
border-image: url(filepath) 30 30 round    图片边框
 
简写:border: 20px rebeccapurple solid;     顺序无需注重

列表属性

ul,ol{   list-style: decimal-leading-zero;
         list-style: none;        
         list-style: circle;
         list-style: upper-alpha;
         list-style: disc; }                

display

none
block         变为块级标签
inline        变为内联标签
inline-block  既有内联又有块级(不自占一行,可设置长宽)

外边距(margine)与内边距(padding)

盒子模型

 

margin : 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

padding : 用于控制内容与边框之间的距离;

Border(边框) : 围绕在内边距和内容外的边框。

Content(内容) : 盒子的内容,显示文本和图像。

简写属性 :上 右 下 左
margin:10px 20px 20px 10px;
        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px
margin:10px 20px 10px;
        上边距为10px
        左右边距为20px
        下边距为10px
margin:10px 20px;
        上下边距为10px
        左右边距为20px
margin:25px;
        所有的4个边距都是25px
margin:0 auto

注意:边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下,   body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框了,解决方法是将body的设置margin设置为0

body{
    margin: 0;
} 

float浮动

基本浮动规则:

先来了解一下block元素和inline元素在文档流中的排列方式。

  block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。一般block元素可以设置width、height、margin、padding属性;

  inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。inline元素设置width、height属性无效

  • 常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
  • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。

脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

​ 假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。此外,浮动的框之后的block元素元素会认为这个框不存在,但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素,会为这个框空出位置,然后按顺序排列。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/
        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</body>
</html>

都不浮动

r2不浮动r1 r3浮动

 

都浮动

 

解决父级坍塌:

.clearfix:after{
    content: '';
    display: block;
    clear: both;

position 定位

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

position:relative 相对定位

相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意:position:relative的一个主要用法:方便绝对定位元素找到参照物。

position:absolute 绝对定位

设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个

块级框,而不论原来它在正常流中生成何种类型的框。

重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、

Bottom、Left用百分比宽度表示。

另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

总结:参照物用相对定位,子元素用绝对定位,并且保证相对定位参照物不会偏移即可。

position:fixed

对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因

为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置

补充

设置透明度

opacity: 0.5;

  

posted @ 2019-12-23 22:18  0bug  阅读(249)  评论(0编辑  收藏  举报