CSS入门级学习
来源:互联网 发布:软件科技公司名称大全 编辑:程序博客网 时间:2024/06/09 15:38
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:分组选择符
案例实验如下,运行结果暂不演示
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>实验</title> 5 <!--外部式css样式--> 6 <link href="3.html" rel="stylesheet" type="text/css"/> 7 <!--嵌入式css样式--> 8 <style type="text/css"> 9 p{color:red;font-size:60px;}10 div{color:blue;text-align:center;}11 input{background-color:black;color:white}12 table{text-align:center;border:1px red solid;}13 .p1{font-family:"楷体";font-size:24px;}14 .p2{font-family:"宋体";font-size:36px;}15 </style>16 </head>17 <body>18 <p>实验的内容</p>19 20 <!--内联式css样式-->21 <div style="font-size:30px">22 今晚吃牛排23 </div>24 <!--选择器的使用-->25 <form>26 账号<input type="text" name="userId"><br/>27 密码<input type="password" name="pw"><br/>28 <div>好好学习将来涨工资</div>29 </form>30 <table>31 <thead>32 <tr>33 <th>编号</th>34 <th>姓名</th>35 <th>性别</th>36 <th>年龄</th>37 </tr>38 </thead>39 <tbody>40 <tr>41 <td>10010</td>42 <td>别先生</td>43 <td>男</td>44 <td>22</td>45 </tr>46 <tr>47 <td>10010</td>48 <td>别先生</td>49 <td>男</td>50 <td>22</td>51 </tr>52 <tr>53 <td>10010</td>54 <td>别先生</td>55 <td>男</td>56 <td>22</td>57 </tr>58 </tbody> 59 <tfoot>60 <tr>61 <td colspan="4">合计</td>62 </tr>63 </tfoot> 64 </table>65 <!--类选择器的用法-->66 <div>67 <h1>春晓</h1>68 <p class="p1">春眠不觉晓,处处闻啼鸟</p>69 <p class="p2">夜来风雨声,处处闻啼鸟</p>70 </div>71 </body>72 </html>
1 body{background-color:green;}
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>实验</title> 5 <style type="text/css"> 6 /*{background-color:blue;}*/ 7 #p1{font-family:"宋体";color:blue 8 ;font-size:30px;} 9 .p3{font-size:10px;color:yellow;}10 .p2{font-size:40px;color:red;}11 p > strong{color:red;font-size:15px;}12 ul > li{color:blue;font-size:20px;}13 table{font-size:25px;color:red; text-align="center";}14 table tr th{font-size:20px;color:yellow;}15 table tr td{font-size:25px;color:white;background-color:black;}16 <!--display:inline(效果是不显示下划线)-->17 .b1 li{display:inline;}18 .b1 a{text-decoration:none;}19 .b1 a:link{text-decoration:none;text-align:center;font-size:20px;}20 .b1 a:hover{font-size:30px;color:red;}21 .b1 a:active{font-size:40px;color:blue;}22 .b1 a:visited{font-size:80px;color:blink;}23 <!--分组选择符-->24 p,h3{color:blue;background:yellow;font-size:30px;}25 </style>26 </head>27 <body>28 <ul class="b1">29 <li><a href="#">首页</a></li>30 <li><a href="#">公司简介</a></li>31 <li><a href="#">公司产品</a></li>32 <li><a href="#">联系我们</a></li>33 <li><a href="http://www.baidu.com">百度</a></li>34 <ul>35 <p>javaweb工程师</p>36 <h3>android工程师</h3>37 <!--id选择器的用法-->38 <p id="p1">今天是二零一六年八月十八日</p>39 <!--class选择器使用多个样式,后定义的显示出来-->40 <p class="p2 p3">春眠不觉晓,处处闻啼鸟,夜来风雨声,花落知多少</p>41 <!--子选择器-->42 <p>锄禾日当午,<strong>汗滴</strong>禾下土,<strong>谁知</strong>盘中餐,粒粒皆辛苦</p>43 <ul>44 <li>html</li>45 <li>css</li>46 <li>javascript</li>47 <ul>48 <li>html</li>49 <li>css</li>50 <li>javascript</li> 51 </ul>52 </ul>53 <!--包含选择器的使用联系;标签内设置样式必须使用=如border="1px";-->54 <table border="1px">55 <thead>56 <tr>57 <th>编号</th>58 <th>姓名</th>59 <th>性别</th>60 <th>年龄</th>61 </tr>62 </thead>63 <tbody>64 <tr>65 <td>10010</td>66 <td>别先生</td>67 <td>男</td>68 <td>22</td>69 </tr>70 <tr>71 <td>10010</td>72 <td>别先生</td>73 <td>男</td>74 <td>22</td>75 </tr>76 <tr>77 <td>10010</td>78 <td>别先生</td>79 <td>男</td>80 <td>22</td>81 </tr>82 </tbody> 83 <tfoot>84 <tr>85 <td colspan="4">合计</td>86 </tr>87 </tfoot> 88 </table>89 90 </body>91 </html>
1 <html>/*实现某行特定元素的标记*/ 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>实验</title> 6 <style type="text/css"> 7 p:nth-child(2){ 8 background:#ff0000; 9 }10 </style>11 </head>12 <body>13 <div>14 <h1>悯农</h1>15 <p>锄禾日当午</p>16 <p>汗滴禾下土</p>17 <p>谁知盘中餐</p>18 <p>粒粒皆辛苦</p>19 20 </div>21 </body>22 </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:简写方式
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>实验</title> 6 <style type="text/css"> 7 body{background:yellow; 8 /*background-color:blue;*/ 9 /*background-image:url(image/1.jpg);*/10 }11 .p1{text-align:center;12 <!--行距-->13 line-height:120%;14 <!--首行缩进-->15 text-indent:35;16 <!--字体之间的间距-->17 letter-spacing:15px;18 }19 .p2{20 width:300px;21 height:450px;22 border-color:red;23 <!--边框的实线或者虚线-->24 border-top-style:dashed;25 border-left-style:solid;26 border-bottom-style:dashed;27 border-right-style:solid;28 }29 </style>30 </head>31 <body>32 <p>锄禾日当午,汗滴禾下土,谁知盘中餐,粒粒皆辛苦</p>33 <p class="p1">好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,34 天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,35 好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,36 天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,好好学习,天天向上,37 好好学习,天天向上,</p>38 <div class="p2">39 </div>40 </body>41 </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:右浮动
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>实验</title> 6 <style type="text/css"> 7 .p1{ 8 width:300px; 9 height:400px;10 background-color:yellow;11 margin:50px;12 padding:50px;13 border:10px blue dashed;14 <!--浮动属性-->15 float:right;16 }17 </style>18 </head>19 <body>20 <div class="p1">21 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="200px" height="300px" title="盒模型"/>22 </div>23 </body>24 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <!--link href="*.css" rel="stylesheet" type="text/css">--> 5 <title>实验</title> 6 <style type="text/css"> 7 .p1{ 8 <!--绝对定位--> 9 position:absolute;10 left:100px;11 top:100px;12 border:5px red solid;13 <!--设置覆盖-->14 z-index:2;15 }16 .p2{17 position:absolute;18 left:100px;19 top:200px;20 border:5px blue solid;21 z-index:1;22 }23 </style>24 </head>25 <body>26 <div class="p1">27 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>28 </div>29 <div class="p2">30 <img src="http://p4.so.qhmsg.com/t01351866ea9a023de9.jpg" width="300px" height="400px"/>31 </div> 32 </body>33 </html>
- CSS入门级学习
- CSS入门学习笔记
- css学习初级入门
- CSS入门学习
- CSS学习入门笔记
- CSS入门学习
- CSS基础知识入门学习
- CSS入门学习
- Css 入门学习---css下拉菜单制作
- CSS入门学习笔记[1]
- div+css的学习入门
- DIV+CSS技术入门学习
- CSS学习之菜鸟入门
- CSS入门学习(转)
- CSS 入门学习篇 - 1
- CSS 入门学习篇 - 2
- 《CSS入门经典》学习笔记
- CSS的入门级
- &= 的含义
- String Aop 动态代理例子
- Spring 事务管理
- SofTech.Cadra.v2006plus\
- 重载
- CSS入门级学习
- oracle中date类型数据的操作
- struts2+spring+hibernate 实现分页
- 【转载】【VSCode】Windows下VSCode编译调试c/c++
- break 与 continue
- WSDL
- HTML+CSS小实战案例
- __int64与long long、long的区别
- hibernate注解方法使用总结(转)