文章

Css入门难点详解

文章目录

属性选择器

​属性选择器​: 检索HTML页面中符合所设置的​属性​条件的​元素​。根据元素的​属性​和​属性值​来匹配​元素​。

​属性选择器​:通过​[ ]​设置被选元素的属性条件。其中包含​属性名称​,后跟​可选条件​以匹配属性的值。如下图所示,将选择HTML页面中所有包含了​alt属性​的​img元素​并为其设置CSS样式。

属性选择器​分两类:

存在和值属性选择器 (匹配精确的属性值)
1. [attr]: 包含​attr​属性的​所有元素​

       2. [attr=val]:选择属性​attr​被​赋值为val​的​所有元素​

       3. [attr~=vall]:​仅选择​属性​attr​中,属性值​包含val​的所有元素             

子串值属性选择器 (伪正则选择器)

       1. [attr|=val]:选择​attr​属性的值是​val​或值​以val-开头​的元素

       2. [attr^=val]:选择attr属性的值​以val开头(包括val​)的元素

       3. [attr$=val]:选择attr属性的值​以val结尾(包括val)​元素

       4. [attr*=val]:选择attr属性的值中​包含字符串val​的元素

font-size属性

您还可以使用​像素(px)​或​相对尺寸单位(em)​或​ pt​数值来操纵字体大小。

当您需要​像素精度​时,以​像素值(px)​设置字体大小是一个不错的选择,它可以让您完全控制文本大小。

​PX特点:​

  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

​em(font size of the element)​是指相对于父元素的字体大小的单位。​em​是​相对长度单位​。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小,那么这是浏览器的默认大小,即​16px​。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。

要计算em大小,只需使用以下公式:​em = px / 16​,即 ​1em = 16px​。

​EM特点:​

  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。
    温馨提示:
    所有​未经调整​的​浏览器​都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明​Font-size=62.5%​,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

盒模型

CSS通过盒模型来确定一个元素的​大小​以及如何​放置它们​。盒模型允许我们在​其它元素​和​周围元素边框​之间的​空间​放置元素。

使用盒模型时,了解元素的总宽度是如何计算的非常重要。

当您指定一个 CSS 元素的​宽度​和​高度​属性时,你只是设置​内容区域​的​宽度​和​高度​。要知道,完整大小的元素,你还必须添加内边距,边框和边距。

例如,带有​填充(padding)​的盒的​总宽度​将是​宽度​加上​填充左侧(padding-left)​和​填充右侧(padding-right)​的​总和​。


这是另一个有​边距(margin)​,​边框(border)​和​填充(padding)​的盒。

总宽度是​左右边距​,​左右边框​,​左右填充​以及​内容的实际宽度​的​总和​。

当您使用CSS设置元素的宽度和高度属性时,可以设置内容区域的宽度和高度。

在盒模型中​设置背景颜色​时,将覆盖​内容区域以及填充区域(padding)​。

最终元素的​总宽度​计算公式是这样的:

​总元素的宽度​​=宽度+左填充+右填充+左边框+右边框+左边距+右边距


元素的总高度

元素的总高度的计算方式与宽度相同。

下面的例子与上一课有关​填充(padding)​,​边框(border)​和​边距(margin)​的计算方式相同。

总而言之,​总元素高度​ = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)

知识点普及:遇到内容div想居中与外部div中,可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果

设置链接样式

链接​可以使用任何​CSS属性​(例如,color,font-family,background等)来​设置样式​。

​链接​的​特殊性​在于能够根据它们所处的​状态​来设置它们的样式。

以下​​四个​链接状态是:

​a:link ​- 定义普通的、未被访问的链接
​a:visited ​- 定义已被访问的链接
​a:active​ - 链接被点击的时刻
​a:hover​ - 鼠标指针位于链接的上方
下面的例子创建一个链接,当鼠标移到它上面的时候会改变样式。

a:hover {
   color: red;
}

当为链接设置样式时,必须遵循以下规则:

-​ a:hover​ 必须在a:link和a:visited之后

  • ​a:active ​必须在a:hover之后

​小技巧:​​“爱恨原则”(LoVe/HAte)​,即四种伪类的首字母:​LVHA​。再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .


cursor参数值

cursor​属性规定要显示的​光标​的​类型(形状)​

该属性定义了​鼠标指针​放在一个​元素边界​范围内时所用的​光标形状​(不过 ​CSS2.1 ​没有定义由哪个边界确定这个范围)。

cursor​属性还有许多其他的值,例如:

​auto ​-默认,浏览器设置的光标
​default ​- 默认光标
​crosshair ​- 光标显示为十字准线
​pointer - 光标显示手形图标
​move ​-此光标指示某对象可被移动
​e-resize ​-此光标指示矩形框的边缘可被向右(东)移动
​ne-resize​-此光标指示矩形框的边缘可被向上及向右移动(北/东)
​nw-resize​-此光标指示矩形框的边缘可被向上及向左移动(北/西)
​n-resize ​-此光标指示矩形框的边缘可被向上(北)移动
​se-resize​-此光标指示矩形框的边缘可被向下及向右移动(南/东)
​sw-resize​-此光标指示矩形框的边缘可被向下及向左移动(南/西)
​text ​-此光标指示文本
​wait -此光标指示程序正忙(通常是一只表或沙漏)
​help -此光标指示可用的帮助(通常是一个问号或一个气球)
cursor的值较多,以下用图片的形式列出。

Css3

CSS3 前缀

CSS3前缀​用于区分并​兼容各大主流浏览器​对于CSS新功能的支持。

在了解这些前缀之前,先介绍一下各大主流​浏览器​的​内核​:

​IE​——trident(国内很多双核浏览器的其中一核就是trident)
​Opera​——Blink(presto已废弃)
​chrome​——Blink(之前是webkit)
​Firefox​——Gecko
​Safari​——webkit(Android手机使用频率最高的也是webkit内核)
而每个内核都有自己的前缀:

​Trident​内核:前缀为​-ms-​
​Gecko​内核:前缀为​-moz-​
​Presto​内核:前缀为​-o-​
​Webkit​内核:前缀为​-webkit-​

所以:

​-moz-​ 代表​firefox​浏览器私有属性
​-ms-​ 代表​IE​浏览器私有属性
​-webkit-​ 代表​safari、chrome​私有属性
​-o- ​代表​Opera​私有属性

​CSS属性​需要带各​浏览器的前缀​,下面介绍一些常用的需要加上前缀的属性​(新增属性)​:

例如,Safari和Chrome的前缀是​-webkit​。 Chrome,Safari和Mozilla目前支持border-radius属性,只要它带有​浏览器前缀​即可生效。

要在Chrome和Safari中指定​边框半径​,请使用以下语法:

HTML代码:

<html>
<head>
   <link rel="stylesheet" href="example.css">
</head>
<body>
    <div >W3cSchool</div>
</body>
</html>

CSS代码:

div {
   border :1px solid green;
   -webkit-border-radius: 24px;
}


通过添加前缀,能使CSS样式在不受支持的浏览器中生效。有时候为了兼容更多的浏览器,你可能需要对同一个样式属性进行​重复定义​增加不同的​前缀​。

CSS3伪类

CSS3伪类用于向某些​选择器​添加​特殊的效果​,它允许我们在不适用​javascript​等脚本的情况下去设置​web页面​中某些​特定的元素​的属性。

​伪类​通常以​ ":"(冒号)​开头。​:first-child​和​:last-child​是较为常用的伪类。

​:first-child​ 将会匹配该元素中的​第一个​子元素。

​:last-child​ 则反之,匹配​最后一个​子元素。

​:nth-child(n) ​ 将会选择该元素中的​第n个​子元素

​:nth-child(2n) ​ 将会选择该元素中的所有​偶数​子元素

​:nth-child(2n+1)​ 将会选择该元素中所有的​奇数​子元素

HTML代码:

<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div id="parent">
       <p>First w3cschool</p>
       <p>Second W3cschool</p>
       <p>Third w3cSchool</p>
       <p>Fourth W3cSchool</p>
       <p>Sixth W3cSchool</p>
    </div>
</body>
</html>

CSS代码:

#parent p:first-child {
   color: green;
   text-decoration: underline;   
}
#parent p:last-child {
   color: pink;
}
#parent p:nth-child(3) {
   color: blue;
}
#parent p:nth-child(2n) {
   font-size: 14px;  
}
#parent p:nth-child(2n+1) {
   font-size: 22px;
}


伪元素

CSS伪元素​是用来添加一些​选择器​的​特殊效果​。

在CSS中有​五个伪元素​,每个都以一个​双冒号(::)​开头:

​::first-line​- 选择器中文本的​第一行​
​::first-letter​ - 选择器中文本的​第一个字母​
​::selection​ - 选择用户​选择的元素​部分
​::before​ - 在元素​之前插入​一些内容
​::after​ - 在元素​之后插入​一些内容
注意 :伪元素​和​伪类​的区别:

​伪类​选择元素基于的是​当前元素处于的状态​,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
与伪类针对特殊状态的元素不同的是,​伪元素​是对元素中的​特定内容​进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
在下面的例子中,​::first-line​伪元素用于为文本的​第一行​设置样式。
HTML代码:

<html>
<head>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <div id="parent">
       <p>First w3cschool
       <br>Second W3cschool
       <br>Third w3cSchool
       <br>Fourth W3cSchool</p>
    </div>
</body>
</html>

CSS代码:

p::first-line {
   color: #AE4141;
}

执行结果:

::selection ​ 伪元素对​选定的文本​进行设置样式。

CSS代码:

p::selection{
   background: #AE4141;
   color: #fff;
}
p::-moz-selection{
   background: #AE4141;
   color: #fff;
}

执行结果:

使用​-moz-​前缀,因为​Mozilla​​不支持​:: selection元素。


background-clip属性

background-clip​属性指定背景的​绘画区域​。

该属性有三个不同的值:

​border-box​ - (默认)背景被绘制到边框的外边缘
​padding-box​ - 背景被绘制到填充的外边缘
​content-box ​- 背景被绘制在内容框中
在下面的例子中,带背景剪辑的第一个div被设置为填充框; 在第二个div中它被设置为内容框。

CSS代码:

.first {
   border: 2px dotted black;
   padding: 20px;
   background: red;
   color: #fff;
   background-clip: padding-box;
}
.second {
   border: 2px dotted black;
   padding: 20px;
   background: red;
   color: #fff;
   background-clip: content-box;
}

background-clip​也适用于​背景图像​。

CSS代码:

div {
   height: 60px;
   background-image: url("https://7nsts.w3cschool.cn/images/w3c/index-logo.png");
   background-clip: content-box;
}


background-clip的透明边框

css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数,我们使用RGBA设置边框颜色同时可以设置边框透明度。

在​元素​上设置​透明边框​会在边框下面显示​元素​自己的背景。

​RGBA​在​RGB​的基础上多了控制​alpha透明度​的参数。

R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:​0 – 255​或用百分数值的取值范围为:​0.0% – 100.0%​。

​超出​范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。​A参数​,取值在​0~1​之间,​不可为负值​

在下面的示例中,我们使用RGBA将边框设置为透明,但实际上它们显示为纯灰色。

    border: 20px solid rgba(0, 0, 0, 0.3);
    width:200px;
    position:absolute;
    top:50px;
    left:50px;
    background-color:white;

执行结果:

通过将background-clip属性设置为padding-box,边框将变为透明。

div {
   border: 20px solid rgba(0, 0, 0, 0.3);
   -moz-background-clip: padding-box;    
   background-clip: padding-box; 
   width:100%;
   position:absolute;
   background-color:white;
}

执行结果:

透明效果是通过background-clip:padding-box实现的。 没有它,盒子的背景也在边界之下,使它不透明。

层叠的背景图

​CSS3​中支持同时使用​多个背景图片​。

通过​","逗号​分隔可以设置多个背景图。 第一个图像将出现在​顶部​,最后一个在底部。

在下面的例子中,我们有两个背景图片:第一个是w3cschool标识(对齐底部和右侧); 第二个是风景图像(与左上角对齐)。

CSS代码:

div {
  width: 400px;
  height: 300px;
  background-image: url('https://7nsts.w3cschool.cn/images/w3c/header-logo.png'),url('https://7n.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg');
  background-position: right bottom, left top;
  background-repeat: no-repeat;
} 

使用​background-position​属性可以更改​背景图像的位置​。各个属性值如下:

可以通过使用background简写属性
例:background: url(w3cschool.png) right top no-repeat, url(w3cschool.jpg) left top no-repeat;


opacity属性

CSS中的​opacity​属性支持为元素增加一个​不透明度​。

利用​opacity​属性来改变图片的​透明度​,​opacity ​属性能够设置的值从 ​0.0 到 1.0​。值越小,图片越透明。

下例中对同一张图片设置多种不透明度进行展示,可以明显看到差别。

CSS代码:

#img1 {
   opacity: 1;
}
#img2 {
   opacity: 0.5;
}
#img3 {
   opacity: 0.25;
}

在Internet Explorer中设置opacity
要让​opacity​属性兼容所有的​IE版本​,请使用​filter:alpha(opacity = x) ​以及​opacity​属性。 x可以取值从0到100。

x设置为​0​则是​完全透明​,反之设置为100是完全​不透明​。

例如,为了使代码能够正常的使用​IE​,当图像的不透明度设置为0.4时,应该如下所示:

CSS代码:

#img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

alpha过滤器是一个仅限于微软的属性,而不是标准的css属性.


CSS3动画

动画让一个元素从一种风格逐渐转变为另一种风格。

您可以根据需要更改任意数量的CSS属性。

关键帧将保存元素在特定时间的样式

@keyframes规则

当您在@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。

要使动画起作用,必须将动画绑定到元素。

以下示例将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: w3cschool;
    animation-duration: 1s;
}
@keyframes w3cschool {
    0%  {background-color: red;}
    50%  {background-color: yellow;}
    70%  {background-color: blue;}
    100% {background-color: green;}
}

执行结果:

w3cschool是为动画设置的名字,您可以设置任意的名字
@keyframes规则
作为使用​百分比​的替代方法,您可以使用​from和to​关键字,其中:

​from​ - 为0%的​起始点​
​to​ - 为100%的​结束点​
下面的两个例子是等价的,并产生相同的结果:

@keyframes w3cschool {
   0% {background-color: red;}
   100% {background-color: green;}
}
@keyframes w3cschool {
   from {background-color: red;}
   to {background-color: green;}
}

animation-name 属性指定要用于元素的动画。
animation-duration 属性指定所选动画的持续时间。
如果未指定animation-duration属性,则动画将不起作用,因为默认值为0。

原文来自:Css入门难点详解,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论