区块链技术博客
www.b2bchain.cn

css1

这篇文章主要介绍了css1的讲解,通过具体代码实例进行17954 讲解,并且分析了css1的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=17954

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

1、什么是CSS

如何学习

  1. CSS是什么
  2. CSS怎么用(快速入门)
  3. CSS选择器(重点和难点)
  4. 美化网页(文字,阴影,超链接,列表,渐变……)
  5. 盒子(容器)模型
  6. 浮动
  7. 定位
  8. 网页动画(特效)

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片等等

1.2、发展史

CSS1.0

CSS2.0 DIV块+CSS,HTML与CSS结构分离思想,网页变得简单

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画…… 所有考虑兼容性
css1

1.3、快速入门

style标签

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    规范 <style> 可以编写css代码 ,每一个声明用分号结尾 语法: 选择器{     声明1;     声明2; } -->     <style>         h1{             color:red;         }     </style> </head> <body> <h1>我是标题</h1>   </body> </html> 

建议使用下面方式

css1

css优势:

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO,容易被收索引擎收录

1.4、CSS的导入方式

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> <!--    内部样式-->     <style>         h1{             color: green;         }     </style>  </head> <body> <!--优先级:就近原则--> <!--行内样式--> <h1 style="color: red">我是标题</h1> </body> </html> 

扩展:外部样式两种写法

  • 链接式:

    h1{     color: yellow; } 
  • 导入式:

<!--导入式--> <style>     @import url("css/style.css"); </style> 

2、选择器

作用:选择页面上的某一个或者每一类元素

2.1、基本选择器

  1. 标签选择器:选择一类标签 标签{}

    <!--标签选择器会选择所有的类型-->     <style>         h1{             color: green;             background: yellow;             border-radius: 21px; <!-- 变成圆角-->         }         p{             font-size: 80px;         }     </style>  </head> <body> <h1>学习java</h1> <p>听狂神说</p>  </body> </html> 
  2. 类选择器:class选择所有class属性一致的标签,跨标签,类名{}

    /*      类选择器的格式;.class         好处:;可以多个标签归类,是同一个class可以复用 */         .zzj{             color: aqua;         } 
  3. id选择器:全局唯一 #id{}

     #a1{             color: red;         }         #a2{      color: green;         } ================================ <h1 id="a1">标题一</h1> <h1 id="a2">标题二</h1> <h1 class="a3">标题三</h1> <h1 class="a4">标题四</h1> 

    优先级:id>class>标签

2.2、层次选择器

<body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul>     <li>         <p>p4</p>     </li>     <li>         <p>p5</p>     </li>     <li>         <p>p6</p>     </li> </ul>  </body> 

1、后代选择器

在某元素的后面

/* 后代选择器*/ body p{     background: red; } 

2、子选择器

/*子选择器*/ body>p{     background: green; } 

###3、相邻兄弟选择器

/*    相邻兄弟选择器*/     .active+p{         background: aqua;     } 

###4、通用选择器

/*通用选择器 ,当前以下所有的兄弟选择器都有用*/ .active~p{     background: yellow; } 

2.3、伪类选择器

<style>     /*ul第一个子元素*/     ul li:first-child{         background: aqua;     }      /*最后一个元素*/     ul li:last-child{         background: yellow;     } </style> 

2.4、属性选择器

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         .demo a{             float: left;             display: block;             height: 50px;             width: 50px;             border-radius: 10px;             background: blue;             text-align: center;             color: gainsboro;             text-decoration: none;             margin-right: 5px;             font: bold 20px/50px Arial;         }     /*    存在id属性的元素         格式:a[]{}         */         a[id=first]{             background: green;         }         /*   *=是统配,所有*/         /*属性名, 属性名 = 属性值(正则)         =   绝对等于         *=  包含这个元素         ^=  以这个开头         $=  以这个结尾         */         a[class*="links"]{             background: yellow;         }         a[href^=http]{             background: yellow;         }         a[href$=pdf]{             background: red;         }     </style> </head> <body> <p class="demo">     <a href="http://www.baidu.com" class="links item first" id="first">1</a>     <a href="" class="links item active" target="_blank" title="test">2</a>     <a href="images/123.html" class="links item">3</a>     <a href="images/123.png" class="links item">4</a>     <a href="images/123.jpg" class="links item">5</a>     <a href="abc" class="links item">6</a>     <a href="/a.pdf" class="links item">7</a>     <a href="/abc.pdf" class="links item">8</a>     <a href="abc.doc" class="links item">9</a>     <a href="abcd.doc" class="links item last">10</a> </p> </body> </html> 

css1

3、美化网页元素

3.1、为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页,页面漂亮
  3. 凸显页面的主题
  4. 提高用户的体验

span标签:重点要突出的字,用span标签套起来

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         #title1{             font-size: 50px;         }     </style> </head> <body> 学习<span id="title1">java</span> </body> </html> 

3.2、字体样式

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <!--         font-family: 字体种类         font-size:   字体大小         font-weight: 字体粗细         color:       字体颜色  -->     <style>          body{             font-family: 仿宋;             font-weight: bold;         }         h1{             font-size: 30px;         }     </style> </head> <body> <h1>SQL介绍</h1> <p>MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,现在属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一。 </p> <p>     在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一。 </p>  </body> </html> 

3.3文本样式

  1. 颜色 color rgb
  2. 文本对齐方式 text-align = center
  3. 首行缩进 text-indent : 2em;
  4. 行高 line-height
  5. 装饰 text – decoration:
  6. 文本图片对齐: vertical-align:middle;

3.4、超链接伪类

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         /* 去除下划线*/         a{             text-decoration: none;             color: #000000;         }         /*鼠标悬浮状态*/         a:hover{             color: orange;             font-size: 20px;         }         /*鼠标按住没释放的状态*/         a:active{             color: green;         }         /*鼠标点击完的状态*/         a:visited{             color: red;         }         /*阴影*/         #price{             text-shadow: aqua 10px 0px 10px;         }     </style> </head> <body> <a href="#">     <img src="../../resouorces/image/b.jpg" height="257" width="500"/> </a> <p>     <a href="#">海贼王</a> </p> <p>     <a href="">作者:尾田荣一郎</a> </p> <p id="price">     ¥199 </p> </body> </html> 

3.5、列表

    }     /*鼠标点击完的状态*/     a:visited{         color: red;     }     /*阴影*/     #price{         text-shadow: aqua 10px 0px 10px;     } </style> 

css1

海贼王

作者:尾田荣一郎

¥199

“`

3.5、列表

本文转自互联网,侵权联系删除css1

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » css1
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们