CSS3基础知识

时间 2019-12-26

标签 css3 css 基础知识栏目 CSS 繁體版

原文原文链接

CSS3基础 1 样式表的使用 1.内联样式表。只影响单个元素，经常使用于标签。
<p style="color: aqua;font-size: 20px">This is CSS.</p>

2.内部样式表。对本页面元素起做用，通常写在<head></head>中，用<style></style>定义。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
       body{
              font-family: "宋体";
       }
       </style>
</head>

3.链接外部样式表。创建一个外部CSS文件用link元素引入到HTML中。
<link rel="stylesheet" type="text/css" href="CSS/realtest.css">

总结：
CSS内联：就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>
CSS外联：就是把CSS放到一个单独的文件里，而后在HTML经过调用。<link rel="stylesheet" type="text/css" href="">。
咱们知道HTTP请求是比较昂贵的，CSS内联的话确定会更快，由于把CSS放到HTML文件里，这意味着减小了一次HTTP请求。而外联的话就是一次HTTP请求，可是能够缓存，当浏览器加载过这个文件时，第二次请求的时候是第缓存里读取的，因此第二次请求时是很快的，外联的CSS还能够重用代码。那究竟是使用内联仍是外联呢？这就要看需求，若是一个页面不须要缓存时，也就是这个页面不太访问，或者访问很少的时候，好比注册页面，通常状况下人家只会进入一次，不可能第次进入这个网站你都去注册，那就另当别论了，这个页面不须要缓存，把CSS放在Head里时能够缩短加载时间，提升用户体验。对于常常访问的页面，外联确定是不二的选择。
在一些大的网站，如：Google，Yahoo也能够看到把CSS写在Head里。对于结构表现行为分离的原则，咱们对于CSS入在Head里是能够接受的，只要不是写在元素上面。
Copyright@Kingwell Leng

2 定义选择器选择器分两个种类，第一种为DOM选择器，包含类型选择器、类选择器和选择元素一部分和ID选择器，第二种包含伪选择器。

1.按照类型选择元素。        以标签为单位来设置相同的显示样式，不须要定义前缀符。
<style>
       p{
              font-family: "宋体";color: red;
       }
       a{color: #ADADAD;}
       </style>

2.按照类型选择标签。        以标签样式类型选择为选择条件，类型为class，“.”为前缀，能够对多个标签应用样式，也能够派生样式。
<head>
<style type=”text/css”>
       .anyname{
              font-family: "宋体";
              color: #ADADAD;
              width: 100px;
              height: auto;
              border: 1px solid blue;
       }
       </style>
</head>
<body>
       <p>This is CSS.</p>
       <div class="anyname">
              <p>This is CSS!</p>
       </div>
</body>

3.按照ID选择元素        相似与类型选择器，以“#”为前缀，在标签中加入id属性引用样式。
<head>
<style type="text/css">
       #box{
              font-family: "宋体";
              color: #ADADAD;
              width: 100px;
              height: auto;
              border: 1px solid blue;
       }
       </style>
</head>
<body>
       <p>This is CSS.</p>
       <div id="box">
              <p>This is CSS!</p>
       </div>
</body>

4.选择元素的一部分        单独选择元素从而不影响其余元素，有子元素选择器和多重元素选择器。
1)子元素选择器
h1>strong{color:red;}
或者：h1 strong{color:red;}
注：只对第一层有效
2)多重元素选择器
       优势在于避免过多的id、class属性设置，直接对所需元素进行定义。
#anyname p li a{float:right; color:#ADADAD;}
3)选择部分元素
       实现多个元素或标签设置为同同样式。
<style type="text/css">
html {color:black;}
p {color:blue;}
h2 {color:silver;}
</style>
      php

伪类选择器 CSS中已经定义好的选择器，不能够重命名。

1)标签中的集中选择器

       a:link表示未访问的连接
a:visited表示已访问的连接
a:hover表示鼠标悬停的连接
a:active表示选定的连接（被按下时）
注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 以后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 以后，才是有效的。
如：a:link{color:#ADADAD;text-decoration:none;}/none表示将默认下划线去掉/

2)CSS中四个伪元素选择器
       First-line       对所选标签元素的第一行应用样式   p:first-line{color:red;}
       First-letter     对所选标签元素的文字首字母应用样式   p:first-letter{color:bule;}
       Before           在某个元素前插入一些内容      li:before{content:”^^^”;}
After              在某个元素后插入一些内容      li:after{content:”(仅用于测试)”;}

3 文本与排版样式的使用 1. 长度、百分单位        像素（px）与百分比是经常使用的长度单位。
在没有CSS规则限制下，长度关系：1em(相对单位)==16px(像素)==0.17in(英寸)==12pt(点)==1pc(派卡)==4.2mm(毫米)==0.42cm(厘米)
css

文本样式属性 1) text-shadow 文字阴影。

       div {
              text-shadow: 10px 10px 10px orange,/x偏移量，y偏移量，模糊半径，颜色/
                                   40px 40px 40px yellow,
                                   20px 20px 23px #ADADAD;/设置多个文字阴影/
              font-size: 50px;
              font-weight: bold;/{normal|bold|bolder|lighter|inherit}/
              font-family: "宋体";
              color: navy;
       }

2) word-wrap 文本的控制换行。用于指定区域如div显示不完一行文字的时候为了避免超出区域范围而使用的强制换行。
       Word-wrap; normal | break-word
       *normal 只能在两个单词之间折断，break-word容许词内换行

3) webfont与font-face CSS3中webfont功能使网页上能显示服务器端的字体。
       使用方法：直接在<style></style>中插入如下代码
@font-face{
              font-famliy:WebFont;
              src: url('Font_Sans_R_45b.otf')format("opentype");/应用服务器端字体/
              font-weight: normal;
       }

4) font-size-adjust 能够保持字体在大小部发生变化的状况下改变字体的类型。
font-size-adjust: 0.46;

5) text-ouline与text-stroke 轮廓控制属性。
Text-outline: 2px 4px red;   /宽度，模糊半径，颜色/

       Text-stroke   描边控制
-webkit-text-stroke:3px #ADADAD;         /宽度，颜色/

4 背景和颜色的使用 1. 背景颜色        网页背景颜色设置：Background-color: transparent | color /透明或者设置颜色/
       HSLA：/色调(0-360,0&360==red,120==green,240==bule)，饱和度(100%)，亮度(100%)，透明度(0~1)/
              div.a{background:hsla(120,35%,50%,0.2);height: 20px;}
html

背景图片格式以下：

              Body{background-img:url(../picture.jpg);}
关于background还有一些属性如-cilp、origin、size等控制背景图片位置等属性

5 盒子概念与使用 1. 元素外边界。        外边界定义了矩形对象与其余矩形对象的距离，即模块与模块之间的空隙。
margin-bottom: 10px;/下边界/
              margin-left: 20px;/左边界/
padding: 40px 30px 20px 60px;/上下左右边界/
              margin: 0 auto;/auto居中/web

元素边框能够定义边框粗细。

border: 50px #ADADAD;/定义粗细，颜色/
border-style: solid dotted double dashed;/上下左右边框单独设置样式/
border-style属性：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit
浏览器

元素内边界内容与边框的空隙，与外边界属性相似。

padding: 40px;
设置一个的时候表示上下左右距离同样，也能够用分别设置上下左右边界距离。
padding: 40px 30px 20px 60px;
缓存

内容的宽度、高度设置在设置边框的时候能够一同定义内容的宽高度。

div.a{
              background:hsla(120,35%,50%,0.2);height: 20px;width:200px;
              margin-bottom: 10px;/外边界定义/
              margin-left: 20px;
              margin: 0 auto;
              padding: 40px 30px 20px 60px;/内边界定义/
              height: 100px;/宽高度定义/
              width: 100px;
              border: 50px #ADADAD;/边框定义/
              border-style: solid dotted double dashed;
       }

服务器

列表样式常见的列表属性值

       list-style-type /设定引导列表的符号类型/
       list-style-image /选择图像做为项目的引导符号/
       list-style-position /决定列表项目缩进/
       常见的列表符号属性
              Circle                   设定类型
              Square                 图像
              Decimal                阿拉伯数字
              Lower-roman       小写罗马数字
              Wpper-roman      大写罗马数字
              Lower-alpha         小写字母
              Wpper-alpha       大写字母
              None                    不现实项目符号
              Disc                      实心圆
       在style中使用列表样式
              List-style-type:decimal;

注：
//-ms表明ie内核识别码
//-moz表明火狐内核识别码
//-webkit表明谷歌内核识别码
//-o表明欧朋【opera】内核识别码
//统标识语句句写符合w3c标准
2017-11-15
转载于猿2048:➤《CSS3基础知识》测试