码迷,mamicode.com
首页 > Web开发 > 详细

初识CSS3

时间:2020-04-13 00:46:53      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:加载   win   方法表   浏览器   重复   鼠标   16px   规范   链接   

1.CSS3基本语法

语法:选择器 {                          eg:h1{
         声明1;                              font-size:12px;
         声明2;                              color:#F00;
         ……                               }
     }

      经验:CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上

 2.HTML中引入CSS样式

行内样式
      使用style属性引入CSS样式
内部样式表
       CSS代码写在<head><style>标签中
外部样式表
       CSS代码保存在扩展名为.css的样式表中
             链接式
             导入式
***链接式与导入式的区别
            <link/>标签属于XHTML,@import是属于CSS2.1
            使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
            使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
            @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

CSS样式优先级
        就近原则:越接近标签的样式优先级越高
        外部样式---->内部样式----->行内样式

 3.CSS3基本选择器 

   基本选择器的优先级:ID选择器>类选择器>标签选择器

   CSS的高级选择器:层次选择器,结构伪类选择器,属性选择器

选择器

示例

特别说明

标签选择器

 

h3 { color:red;}

 

标签选择器直接应用于HTML标签

 

类选择器

 

.class {color:blue;}

 

类选择器可在页面中多次使用

 

ID选择器

 

#id { color:green;}

 

ID选择器在同一个页面中只能使用一次

 

 

 

 

 

 

 

 

 

4.字体样式

属性名            含义                              举例
font-family      设置字体类型                       font-family:"隶书";
font-size        设置字体大小                       font-size:12px;
font-style       设置字体风格                       font-style:italic;
font-weight      设置字体的粗细                      font-weight:bold;
font             在一个声明中设置所有字体属性          font:italic bold 36px "宋体";

  文本样式

属性               含义                   举例
color             设置文本颜色             color:#00C;
text-align        设置元素水平对齐方式      text-align:right;
text-indent       设置首行文本的缩进        text-indent:20px;
line-height       设置文本的行高           line-height:25px;
text-decoration   设置文本的装饰           text-decoration:underline;

5.文本阴影

语法:text-shadow : color  x-offset  y-offset  blur-radius;
   eg:h2{  
        font-size: 18px;  
        text-shadow: blue 10px 10px 2px; 
      }

/ * color 阴影颜色     
     x-offset   X轴位移,用来指定阴影水平位移量
     y-offset   Y轴位移,用来指定阴影垂直位移量
     blur-radius   阴影模糊半径,代表阴影向外模糊的模糊范围 */

 6.使用CSS设置超链接

伪类名称       含义                     示例
a:link       未单击访问时超链接样式       a:link{color:#9ef5f9;}
a:visited    单击访问后超链接样式         a:visited {color:#333;}
a:hover      鼠标悬浮其上的超链接样式      a:hover{color:#ff7300;}
a:active     鼠标单击未释放的超链接样式    a:active {color:#999;}

**设置伪类的顺序:a:link->a:visited->a:hover->a:active

7.网页背景

backgroud属性
     语法:background: 背景颜色 背景图像 背景定位 背景重复方式;
背景属性               描述           特别说明
background-color      背景颜色       背景颜色值:十六进制方法表示
background-image      背景图像       background-image:url(图片路径);
background-repeat     背景重复方式    repeat:沿水平和垂直两个方向平铺
                                    no-repeat:不平铺,即只显示一次
                                    repeat-x:只沿水平方向平铺
                                    repeat-y:只沿垂直方向平铺
background-position   背景定位       属性值可以像素/百分比/方向关键词
background-size       背景尺寸       属性值可以是auto/percentage/cover/contain

8.CSS渐变

  线性渐变:颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

  径向渐变:圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

  线性渐变语法:background: linear-gradient ( position,  color1,  color2,…)

技术图片

 

初识CSS3

标签:加载   win   方法表   浏览器   重复   鼠标   16px   规范   链接   

原文地址:https://www.cnblogs.com/yun---meng/p/12688679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!