1020人加入学习
(2人评价)
Web前端第二季(CSS)

制作完成于2018年6月6日 CSS2.0,

价格 免费

css核心语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}

选择器
1,标签选择器
标签{}
2,类选择器(前面加上点)
.类名{}
标签.类名{}
标签的类名通过class属性指定
a,可以给多个标签指定同一个类名 class="xx"
b,也可以给一个标签指定多个类,中间空格隔开    class="xxx xxx"
3,id选择器
#id名{}
一般id名是不相同的,通过id属性指定某个标签的id,id就相当于我们每个人的身份证,是唯一的。
一个html元素只有一个id,不同元素的id是不相同的。

优先级 id选择器 > 类选择器 >标签选择器
其他时候 : 就近原则

注意:
一个标签可以既指定class也指定id。
class和id的值是区分大小写的。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>css语法</title>
    <style type="text/css">
        /*
        选择器{
            属性名1:属性值1;
            属性名2:属性值2;
            属性民3:属性值3;
        }
        */
        /* 1。标签选择器 */
        div{
            font-size:12px;
        }
        /* 2,类选择器 */
        .one{
            color:blue;
        }
        .two{
            color:green;
        }
        /* 3,id选择器 */
        #header{
            font-family:幼圆;
            font-size:20px;
        }
        #nav{
            font-size:20px;
        }
    </style>
</head>
<body>
    <!-- 注释 -->
    <div class="one" id="header">我是第1个div标签里面的内容</div>
    <div class="two" id="nav">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

 

[展开全文]

书写css代码的三种方式

1,内部引入方式(直接在html页面上书写css代码)

放在head标签里面

 

2,行内引入(只对某个标签有效,直接写属性样式,不需要写选择器)

 

3,外部引入(单独创建一个css文件)

注意:可以引入多个

CSS使用方法优先级

就近原则:距离html元素最近的css样式起作用。

行内 优先于 内部引入。

内部引入 和 外部引入 优先级由它的位置决定。

 

CSS使用方法优先级
就近原则:距离html元素最近的css样式起作用。
行内 优先于 内部引入。
内部引入 和 外部引入 优先级由它的位置决定。

css核心语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本css语法</title>
    <!-- 外部引入方式 -->
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <!-- 内部引入方式 -->
    <style type="text/css">
        div{
            font-size:30px;
            font-family:"楷体";
        }
        p{
            font-size:10px;
        }
    </style>
    <link rel="stylesheet" href="css/footer.css" />
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
    <!-- 行内引入 -->
    <p style="color: brown;font-size: 30px;">我是p标签里面的内容</p>
</body>
</html>

main.css

div{
    color:green;
    font-size:10px;
}

 

[展开全文]

HTML
什么是css?
w3cschool:http://www.w3school.com.cn/css/css_jianjie.asp

HTML是基础,承载基本内容(图片,文本)
CSS可以让网页更加美观!
JavaScript可以让网页动起来,实现特效(动画,渐隐渐现等....)。

简述:CSS是用来控制样式的。
控制谁的样式?html里面的所有标签和标签里面内容的样式。
什么是样式?颜色,大小,位置...等视觉效果都是样式。
优点:解决内容与表现分离(.html   若干.css文件)
在学习开发期间,我们把css代码直接写在html文件里面,便捷

案例:
p{
    font-size:15px; /*这个是css注释*/
    color:blue;
    font-family:"幼圆";
}
div{
    font-family:"隶书";
}
h1,h2,h3,p{
    font-size:90px;
}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本css语法</title>
    <style type="text/css">
        div{
            font-size:30px;
            font-family:"楷体";
        }
    </style>
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
</body>
</html>

 

[展开全文]

什么是块级标签和内联标签(行内标签)?
块级标签占据一行,需要换行。
div p ul ol h1~h6 hr form ...
行内标签:在一行内显示,不换行
span b i font a textare img span input ...

标签嵌套规则:
https://www.cnblogs.com/xiyangbaixue/p/4090511.html

 

浏览器F12调试工具

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>块元素和行内元素的区别</title>
</head>
<body>
    <div>div是块元素</div>
    <h1>标题</h1>
    <p>段落</p>
    <hr />
    <span>span是行内</span><b>b标签</b><i>i标签</i><font>font标签</font><img src="img/640.jpg" /><input type="text" /><textarea></textarea>
</body>
</html>

 

[展开全文]

什么是html元素?

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

什么是div?

div是一个标签,叫做一个块标签,一个div就是一个块,单独占用一行,div可以用作容器,容纳其他html元素(可以包含其他标题,表格,图片等各种html元素)。

单独使用起来,没有其他的效果,需要通过css来控制。

示例(单独占一行)

我是一个好人!

什么是span?

span是一个标签,它是一个内联标签。

单独使用起来没有其他效果,需要通过css来控制样式。

当没有css控制span的样式的时候,span对标签里面的内容,没有任何效果影响。

示例:

SiKi学院是一个很牛B的网站!没错!

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是html元素</title>
</head>
<body>
    什么是html元素?
    <p>我是一个好人!</p>
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是div</title>
</head>
<body>
    <div>我是第1个div标签里面的内容<h1>这个是标题</h1></div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    我是第1个div标签里面的内容<br />
    我是第2个div标签里面的内容<br />
    我是第3个div标签里面的内容<br />
</body>
</html>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>什么是span标签</title>
</head>
<body>
    <span>我是第1个span标签里面的内容</span><br />
    <span>我是第2个span标签里面的内容</span><br />
    <span>我是第3个span标签里面的内容</span><br />
    我是第1个span标签里面的内容<br />
    我是第2个span标签里面的内容<br />
    我是第3个span标签里面的内容<br />
    <p>我是第1个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
</body>
</html>

 

[展开全文]

布局方式:
为什么需要先给整个网页布局?
没有布局的网页,是不美观的,是杂乱的。
有了布局,就相等于大楼有了主体结构,接下来就是给主体结构添砖加瓦,刷漆等。
这些后续工作在我们的网页中就是内容,图片文字等内容。
第一种方式:Table(基本不用)
第二种方式:DIV+CSS(项目中的常用方式)

 

CSS用来布局和设置样式。

[展开全文]

css设置字体不可以直接用中文,建议用Unicode或者英文(得百度找),不然会因为utf8编码不识别而出错

示例(楷体):font-family: "KaiTi";

[展开全文]

背景图片 优先于 背景颜色

等价于

background:green url(img/api.jpg) np-repeat top fixed;
[展开全文]

选择器的类型:

1.基本选择器

2.群组选择器

//设置标签为div span,类为one,id为header的标签内容颜色为蓝色

div,span,.one,#header{
  color:blue;
}

3.全局选择器

//设置所有的标签内容颜色为绿色

*{
color:green;
}

4.属性选择器

//设置属性type='text'的input标签背景颜色为黄色

input[type='text']{
  background-color:yellow;
}

 

[展开全文]

id选择器 优先于 类选择器 优先于 标签选择器

[展开全文]

标签选择器的变形:

<div><p>字体为20px</p></div>

//后代选择器

div p{

  font-size:20px;

}

类选择器的变形:

<div class="one">字体为30px</div>

<p class="one">字体为30px</p>

//设置div类为one的字体为30px

div.one{

  font-size:30px;

}

//设置所有类为one的字体为30px

.one{

  font-size:30px;

}

------------------------------------

.two{

font-size:40px;

}

//有多个类名中间用空格隔开

<div class="one two">字体为40px</div>

id选择器是唯一的;

[展开全文]

<--表示在style里面书写css标签-->

[展开全文]

自动选取重叠外边距最大的

[展开全文]

margin auto没有上下居中 只有(0 auto)左右居中

[展开全文]

PADDING 上右下左 百分百相对于父元素计算

[展开全文]

盒子三要素

1 边框 border (solid 显示边框)

2 内边距 padding

3外边距 margin

[展开全文]

dvi*3+tab按键   可以快捷输入。

[展开全文]

授课教师

SiKi学院老师

课程特色

下载资料(1)
视频(47)