CSS入门级学习

css入门学习
1:认识CSS
　　1.1：css简介，css全称是层叠样式表，Cascading style sheets
　　1.2：css的作用，主要是用于定义html内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等
　　　　使用css样式的一个好处是通过定义某个样式，可以让不同的网页位置的字体有着统一的字体，字号或者颜色等

　　1.3：css代码语法
　　　　css样式由选择器和声明组成，而声明又由属性和值组成
　　　　h1 { color:red;font-size:14px;}
　　　　选择器属性值{属性和值构成声明}

　　　　选择器：指明网页中要应用样式规则的元素
　　　　声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分割。当有多条声明时，中间可以英文分号":"分隔

　　　　css注释代码

2：CSS基本知识（就近原则）
　　　　2.1：内联式css样式，直接写在现有的html标签中
　　　　2.2：嵌入式css样式，写在当前的文件中
　　　　2.3：外部式css样式，写在单独的一个文件中，使用link引入
　　　　　　css样式文件名以称以有意义的英文字母命名
　　　　　　rel="stylesheet" type="text/css"是固定的写法，一定要写到link标签内不可修改
　　　　　　语法格式(<link href="" rel="stylesheet" type="text/css">)
　　　　　　<link>标签位置一般写在<head>标签之内
　　　　2.4：优先级
　　　　　　内联式>嵌入式>外部式

3：CSS选择器
　　3.1：什么是选择器
　　　　每一条css样式声明或者定义由两部分组成(选择器（样式）)
　　3.2：标签选择器
　　3.3：类选择器
　　　　《实际开发过程中使用类选择器最多》
　　　　类选择器名称(css样式代码;)
　　3.4：ID选择器
　　　　为标签设置id="id名称"，而不是class="类名称";
　　　　ID选择符的前面是#号，而不是英文圆点(.);
　　　3.5：类和ID选择器的区别
　　　　相同点：可以应用于任何元素
　　　　不同点：(1)ID选择器只能在文档中使用一个，与类选择器不同，在一个HTML文档中，ID选择器只能使用一个，而且仅一次，而类选择器可以使用多次
　　　　　　　　(2)可以使用类选择器词列表方法为一个元素同时设置多个样式，我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，id选择器是不可以的，不能使用id词列表
　　　　ID选择器优先于类选择器
　　3.6：子选择器
　　　　还有一个比较有用的的选择器子选择器，即大于符号>，用来选择指定标签元素的第一代元素
　　3.7：包含(后代)选择器
　　　　包含选择器，即加入空格，用于选择指定标签元素下的后辈元素，如右侧代码编辑器中的代码。
　　3.8：通用选择器(了解即可)
　　　　*{color:red;}

　　　　　*{margin:0;padding:0}//去掉页面样式　
　　3.9：伪类选择符(一般用在链接的标签上面)
　　　　伪类选择器：a:link正常连接的方式
　　　　a:hover:鼠标放上去的样式
　　　　a:active:选择链接时的样式
　　　　a:visited:已经访问过的链接的样式
　　3.10：分组选择符

案例实验如下，运行结果暂不演示

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>实验</title>

     <!--外部式css样式-->

     <link href="3.html" rel="stylesheet" type="text/css"/>

     <!--嵌入式css样式-->

     <style type="text/css">

         p{color:red;font-size:60px;}

         div{color:blue;text-align:center;}

         input{background-color:black;color:white}

         table{text-align:center;border:1px red solid;}

         .p1{font-family:"楷体";font-size:24px;}

         .p2{font-family:"宋体";font-size:36px;}

     </style>

 </head>

 <body>

     <p>实验的内容</p>

     <!--内联式css样式-->

     <div style="font-size:30px">

         今晚吃牛排

     </div>

     <!--选择器的使用-->

     <form>

         账号<input type="text" name="userId"><br/>

         密码<input type="password" name="pw"><br/>

         <div>好好学习将来涨工资</div>

     </form>

     <table>

         <thead>

             <tr>

                 <th>编号</th>

                 <th>姓名</th>

                 <th>性别</th>

                 <th>年龄</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

         </tbody>

         <tfoot>

             <tr>

                 <td colspan="4">合计</td>

             </tr>

         </tfoot>

     </table>

     <!--类选择器的用法-->

     <div>

         <h1>春晓</h1>

         <p class="p1">春眠不觉晓，处处闻啼鸟</p>

         <p class="p2">夜来风雨声，处处闻啼鸟</p>

     </div>

 </body>

 </html>

 body{background-color:green;}

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>实验</title>

     <style type="text/css">

         /*{background-color:blue;}*/

         #p1{font-family:"宋体";color:blue

         ;font-size:30px;}

         .p3{font-size:10px;color:yellow;}

         .p2{font-size:40px;color:red;}

         p > strong{color:red;font-size:15px;}

         ul > li{color:blue;font-size:20px;}

         table{font-size:25px;color:red; text-align="center";}

         table tr th{font-size:20px;color:yellow;}

         table tr td{font-size:25px;color:white;background-color:black;}

         <!--display:inline(效果是不显示下划线)-->

         .b1 li{display:inline;}

         .b1 a{text-decoration:none;}

         .b1 a:link{text-decoration:none;text-align:center;font-size:20px;}

         .b1 a:hover{font-size:30px;color:red;}

         .b1 a:active{font-size:40px;color:blue;}

         .b1 a:visited{font-size:80px;color:blink;}

         <!--分组选择符-->

         p,h3{color:blue;background:yellow;font-size:30px;}

     </style>

 </head>

 <body>

     <ul class="b1">

         <li><a href="#">首页</a></li>

         <li><a href="#">公司简介</a></li>

         <li><a href="#">公司产品</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="http://www.baidu.com">百度</a></li>

     <ul>

     <p>javaweb工程师</p>

     <h3>android工程师</h3>

     <!--id选择器的用法-->

     <p id="p1">今天是二零一六年八月十八日</p>

     <!--class选择器使用多个样式，后定义的显示出来-->

     <p class="p2 p3">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少</p>

     <!--子选择器-->

     <p>锄禾日当午，<strong>汗滴</strong>禾下土，<strong>谁知</strong>盘中餐，粒粒皆辛苦</p>

     <ul>

         <li>html</li>

         <li>css</li>

         <li>javascript</li>

         <ul>

             <li>html</li>

             <li>css</li>

             <li>javascript</li>

         </ul>

     </ul>

     <!--包含选择器的使用联系；标签内设置样式必须使用=如border="1px";-->

     <table border="1px">

         <thead>

             <tr>

                 <th>编号</th>

                 <th>姓名</th>

                 <th>性别</th>

                 <th>年龄</th>

             </tr>

         </thead>

         <tbody>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

             <tr>

                 <td>10010</td>

                 <td>别先生</td>

                 <td>男</td>

                 <td>22</td>

             </tr>

         </tbody>

         <tfoot>

             <tr>

                 <td colspan="4">合计</td>

             </tr>

         </tfoot>

     </table>

 </body>

 </html>

 <html>/*实现某行特定元素的标记*/

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <!--link href="*.css" rel="stylesheet" type="text/css">-->

     <title>实验</title>

     <style type="text/css">

         p:nth-child(2){

             background:#ff0000;

         }

     </style>

 </head>

 <body>

     <div>

         <h1>悯农</h1>

         <p>锄禾日当午</p>

         <p>汗滴禾下土</p>

         <p>谁知盘中餐</p>

         <p>粒粒皆辛苦</p>

     </div>

 </body>

 </html>

4：常见属性(百度搜索在线API,查询更多字体属性，火狐浏览器使用火狐firbug进行前段开发调正)
　　4.1：颜色属性
　　　　color属性定义文本的颜色
　　　　color：green;
　　　　color:#ff6600;
　　　　color:#f60;
　　　　color:rgb(255,255,255);
　　　　color:rgba(255,255,255,1);
　　4.2：字体属性
　　　　font-size:字体大小
　　　　font-famliy:定义字体
　　　　font-weight:字体加粗
　　4.3：背景属性
　　　　背景颜色：background-color;
　　　　背景图片：background-image;
　　　　背景重复：background-repeat;
　　　　背景位置：background-position;
　　　　简写方式：
　　4.4：文本属性
　　　　text-align:横向排列
　　　　line-height:文本行高
　　　　　　(1):%基于字体大小的百分比行高
　　　　　　(2):数值来设置固定值
　　　　text-indent:首行缩进
　　　　letter-spacing:字符间距
　　　　属性值：normal默认，length设置具体的数值，可以设置负数，inherit继承
　　　4.5：边框属性
　　　　4.5.1:边框风格border-style;
　　　　(1):统一风格(简写风格)border-style;
　　　　(2):单独定义某一方向的边框样式
　　　　border-bottom-style:下边框样式
　　　　border-top-style:上边框样式
　　　　border-left-style:左边框样式
　　　　border-right-style:右边框样式
　　(3):边框风格样式的属性值
　　　　none:无边框
　　　　solid:直线边框
　　　　dashed:虚线边框
　　　　dotted:点状边框
　　　　double:双线边框
　　　　groove:吐槽边框
　　　　ridge:垄状边框
　　　　inset inset边框
　　　　outset outset边框
　　　　inherit继承
　　　　依托border-color的属性值
　　4.5.2:边框颜色border-color;
　　(1):统一风格(简写风格)
　　　　border-color;
　　(2):单独风格
　　　　border-top-color:上边边框颜色
　　　　border-bottom-color:下边边框颜色
　　　　border-left-color:左边边框颜色
　　　　border-right-color:右边边框颜色
　　(3):属性值
　　　　颜色值得名称：red,yellow;
　　　　RGB:rgb(255,255,0,0.1)
　　　　十六进制：#ff0,#ffff00;
　　(4):属性值的四种方式
　　　　一个值：border-color：(上,下,左,右)
　　　　两个值：border-color：(上,下)(左,右)
　　　　三个值：border-color：(上)(下,左)(右)
　　　　四个值：border-color：(上)(下)(左)(右)
　　4.5.3:简写方式

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <!--link href="*.css" rel="stylesheet" type="text/css">-->

     <title>实验</title>

     <style type="text/css">

         body{background:yellow;

             /*background-color:blue;*/

             /*background-image:url(image/1.jpg);*/

         }

         .p1{text-align:center;

             <!--行距-->

             line-height:120%;

             <!--首行缩进-->

             text-indent:;

             <!--字体之间的间距-->

             letter-spacing:15px;

         }

         .p2{

             width:300px;

             height:450px;

             border-color:red;

             <!--边框的实线或者虚线-->

             border-top-style:dashed;

             border-left-style:solid;

             border-bottom-style:dashed;

             border-right-style:solid;

         }

     </style>

 </head>

 <body>

     <p>锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦</p>

     <p class="p1">好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，

     天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，

     好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，

     天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，好好学习，天天向上，

     好好学习，天天向上，</p>

     <div class="p2">

     </div>

 </body>

 </html>

5：DIV+CSS布局
　　5.1：div和span
　　　　div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
　　　　div和span的区别在于，span是内联元素，div是块级元素
　　5.2：盒模型
　　　　5.2.1:margin
　　　　　　盒子外边距
　　　　5.2.2:padding
　　　　　　盒子内边距
　　　　5.2.3:border
　　　　　　盒子边框宽度
　　　　5.2.4:width
　　　　　　盒子宽度
　　　　5.2.5:height
　　　　　　盒子高度
　　5.3：布局相关的属性
　　　　5.3.1：position定位方式
　　　　　　(1):正常定位：relative
　　　　　　(2):根据父元素进行定位：absolute
　　　　　　(3):根据浏览器窗口进行定位：fixed
　　　　　　(4):没有定位：static
　　　　　　(5):继承inherit
　　　　5.3.2：定位
　　　　　　左left 右right 上top 下bottom离页面顶点的距离
　　　　5.3.3：z-index层覆盖先后顺序(优先级)
　　　　5.3.4：display显示属性(学习的重点)
　　　　　　　　display:none层不显示
　　　　　　　　display:block块状显示，在元素后面换行，显示下一个块元素
　　　　　　　　display:inline内联显示，多个可以显示在一行内

　　　　5.3.5：float浮动属性
　　　　　　left:左浮动
　　　　　　right:右浮动

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <!--link href="*.css" rel="stylesheet" type="text/css">-->

     <title>实验</title>

     <style type="text/css">

         .p1{

             width:300px;

             height:400px;

             background-color:yellow;

             margin:50px;

             padding:50px;

             border:10px blue dashed;

             <!--浮动属性-->

             float:right;

         }

     </style>

 </head>

 <body>

     <div class="p1">

         <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="200px" height="300px" title="盒模型"/>

     </div>

     </body>

 </html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <!--link href="*.css" rel="stylesheet" type="text/css">-->

     <title>实验</title>

     <style type="text/css">

         .p1{

             <!--绝对定位-->

             position:absolute;

             left:100px;

             top:100px;

             border:5px red solid;

             <!--设置覆盖-->

             z-index:;

         }

         .p2{

             position:absolute;

             left:100px;

             top:200px;

             border:5px blue solid;

             z-index:;

         }

     </style>

 </head>

 <body>

     <div class="p1">

         <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>

     </div>

     <div class="p2">

         <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>

     </div>

     </body>

 </html>

CSS入门级学习的更多相关文章

css居中学习笔记
css居中学习笔记一.水平居中以下面的代码为例: <body> <div class="parent"> <div class="chi ...
HTML&CSS基础学习笔记—创建列表
创建一张表格很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义表格. <table> </table> 添 ...
CSS 3 学习笔记
css 3 学习笔记文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
（6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
关于Html+css阶段学习总结
一.学习经历进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...
Boostrap入门级css样式学习
1. 自适应网页设计首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

随机推荐

在Linux终端命令行下播放音乐的命令（Ubuntu）
现在的 Linux 桌面已经发展的很好了,在桌面下播放音乐操作起来也很简单.那么我们还记得在桌面不是那么好的时候我们是怎么播放音乐的么?哎,我是想不起来了,实在是太难了. 不过现在我们可以先安装一个小 ...
DIV重叠如何优先显示（div浮在重叠的div上面）
如果有2个div有重叠,默认是根据html解析顺序,最后加载的优先级最高(浮在最上面). 问题: 如果想把前面加载的div显示在最上面?关键字:z-index 举例: --原来的页面:first di ...
Top Data Scientists to Follow & Best Data Science Tutorials on GitHub
http://www.analyticsvidhya.com/blog/2015/07/github-special-data-scientists-to-follow-best-tutorials/ ...
20145225《Java程序设计》实验五 Java网络编程及安全
20145225<Java程序设计> 实验五 Java网络编程及安全实验报告一.实验内容基于Java Socket实现安全传输. 基于TCP实现客户端和服务器,结对编程一人负责客户端 ...
centos安装youcompleteme
哈哈,我又回来了,简单的重新装了一边虚拟机,又把vim配置了一遍,这回有信心把youcomplete的安装方法贴出来了,先给个权威的链接,然后给出具体步骤,保证没问题可以安装成功 http://www ...
StringGrid 实例1：初始化StirngGrid的首行和首列
实例1:初始化StirngGrid的首行和首列
Asp.Net 基础理论
WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. 在学习WebForm时,其知识量比WinForm要多,在实 ...
DBHelper
DBHelper: using System; using System.Collections.Generic; using System.Linq; using System.Text; usin ...
占位符(placeholder text)
占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type=" ...
LDO-XC6216C202MR-G
XC6216C202MR-G 1.改产品是特瑞士(TOREX)公司电源管理芯片,输入电压可达28V,输出可调23V,最大输出电流150mA.压差最小为300mV.该系列有固定式输出和可调式 ...

CSS入门级学习

CSS入门级学习的更多相关文章

随机推荐

热门专题