网页编程三剑客之CSS

简介: CSS以及CSS3等知识点相关介绍

CSS的简介1

层叠样式表(级联样式表),能够对网页中元素位置的排版进行像素级精确控制,
支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

CSS的作用:

1、html虽然可以在一定程度上修饰页面,但是页面的整体还是不够美观。
2、html进行网页书写重复代码比较多,后期的维护性不好。引入css来解决类似问题。

Css的四种引入方式

1、内联式
在这里插入图片描述
2、内嵌式
在这里插入图片描述
3、连接式
在这里插入图片描述
4、导入式
在这里插入图片描述
注:css引入方式的原则,就近原则。样式跟随最近的控制标签。

CSS中的选择器

1、通用选择器(*代表所有元素)
2、 元素选择器(指定某个具体元素div…)
3、ID选择器(#id的名称 id的名称保证唯一)
4、 类选择器(.类名,可以指定多个相同的div)
优先级:ID>类选择器>元素选择器>通用选择器

5、后代选择器(div span:只要在父标签里即可)
6、子类选择器(div)span:只会改变直系子标签)
7、兄弟选择器(*#兄弟选择器名称+P:只会改变下面相邻元素对象)

           (*#兄弟选择器名称~P:改变下面所有元素对象)

8、伪类选择器
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
控制超链接的颜色。a:hover鼠标移至链接可选择的颜色

CSS的常用属性

1、字体:

         /*字体的颜色*/
        color: gray;
        /*字体的大小*/
        font-size: 12px;
        /*字体的加粗*/
        /*font-weight: bold;*/
        /*字体的风格*/
        /*font-family: 宋体;*/
        /*字体倾斜*/
        /*font-style: italic;*/

2、文本

     

         /*下划线展示*/
            text-decoration: underline;
           /*去除下划线*/
            text-decoration: none;
           /*文本居中*/
            text-align: center;
            

3、行高

      

  line-height: 40px;  
            
            

4、背景

            /设置背景图片 此处是网络路径,引用网络上面的图片/
            background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
            
            /*设置背景图片不重复*/
            
            background-repeat: no-repeat;
            
            /*调整背景图片的位置   X   Y*/
            background-position: center;
            
            /*调整背景图片的大小   宽  高  */
            /*background-size: 300px  500px;*/
            /*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
            background-color: rgba(255,0,0,.5);

5、行内元素:(多个标签位于同一行)


 span  font  小标签   img  a  等

6、块元素:(标签可以自动换行的元素是块元素)

   
   div   h1-h6  ul    p    等 

7、border 属性有三个修饰属性

border-color
border-color:red;
border-top-color:blue;
border-width
border-width: 1px;
border-left-width: 3px;
border-style
border-style: solid
border-bottom-style: solid;
可以使用border统一设置
border: 1px solid red;
border-right: 5px dotted blue;
在这里插入图片描述

8、display元素的使用

  行内元素转块级元素(可为其设置宽、高等属性)
    display: block;

    行内、块级元素内元素的隐藏(例:div、a标签里的内容或元素)
    display:none;

    将内联元素转换为行内元素。不换行(例:将两个p标签的内容合并)
    display:inline
    
    将元素变为行内块级元素显示,在同一行显示,且能设置宽和高:
    display:inline-black;

9、其他样式

调整透明度的属性  0-1 
opacity: 0.4; 



超出隐藏  hidden
overflow: hidden; 






CSS 中的定位

绝对定位:

absolute :定位离开之后释放的之前的位置 基于外
层父级标签来说

相对定位:

relative: 定位离开之后之前的位置没有释放 基于之
前的位置来说

固定定位:

fixed :始终是基于浏览器的左上角定位 适合
做广告

默认定位:

static :初始的定位的操作

CSS3简介

CSS3 完全向后兼容,因此您不必改变现有的设计。浏览器通常支持 CSS2。
W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。

CSS3 中新增选择器

/获得class名称是div1下面的第一个子元素/

.div1>p:first-child{ 
    color: red; 
} 



  div1>p:last-child{ 
   color: green; 
   } 

/获得具体的某一个子元素/

   .div1>p:nth-child(2){ 
     background-color: palegreen; 
     } 
   .div1>p:nth-child(even){ 
     background-color: red; 
    } 
    div1>p:nth-child(odd){ 
    background-color: green; 
    } 

/获得空的元素对象/

.div1>p:empty{ 
        
       height: 50px; 
       background-color: darkmagenta; 
} 
 

/获得焦点执行的样式/

   input:focus{ 
     width: 300px; 
     height:100px; 
    } 
   input:checked{ 
    width: 20px; 
    height: 20px; 
} 

伪对象选择器是在指定的对象之前(或者之后)插入内容

 .div1:before{ 
   /*content: "我们的祖国是花园";*/ 
    content: url(img/1.jpg); 
} 
.div1:after{} 

CSS3新增属性选择器介绍

/*属性选择器*/ 
   input[type='text']{ 
    width: 300px; 
    height: 40px; 
 
   } 

/*属性 ^用fom开头的对象   $*/ 
   input[name^='fom']{ 
    width: 300px; 
    height: 40px; 
   } 

选择器的种类总结:

【1】基础选择器

    *   id   class   标签 

【2】关系选择器

  >   +   ~ 

【3】伪类选择器
hover
【4】伪对象选择器
before 、after
【5】属性选择器
input[type='text']

CSS3中常用的属性


     

倒圆角指令

        border-radius: 100px;
        /* 左上右下   右上左下 */
        /*border-radius:10px  60px;*/
        
        /*border-radius:10px 20px 30px 40px;*/

  
旋转角度
        transform: rotate(45deg);
        /*放大的倍数*/
        /*transform: scale(1.3);*/
        /* X:水平的位移   Y  :垂直的位移  负数:上*/
        /*transform: translate(0px,-5px);*/
        /*2D角度的旋转  X  Y*/
         transform: skew(40deg,45deg);

阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色

        

 box-shadow: 0px 0px 70px #D5093C;
         
         

CSS3中的动画标签

不同浏览器支持不同的动画引入方式,以具体情况而定
@keyframes myfirst/*绝大部分可以*/
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

http://www.w3school.com.cn/css3/index.asp


  1. 仅本人整理的部分知识点,不够全面,如果想要了解更多,请转至
相关文章
|
2天前
|
前端开发 编解码 移动开发
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
【魅力网页的背后】:CSS基础魔法,从零打造视觉盛宴
|
2天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
12天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
19天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
26天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
38 1
|
30天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
1月前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
1月前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
14 1
|
1月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
1月前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。