码迷,mamicode.com
首页 > Web开发 > 详细

3、CSS基本介绍

时间:2018-10-16 13:39:04      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:code   完整   分离   背景颜色   分行   样式表   规则   标准   1.2   

1.1 CSS基本介绍
一、web 标准
所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构、样式、行为三者相分离。
二、名词解释
1.结构:就是通过HTML标签搭建的网页的结构。
2.样式:就是通过CSS对当前的网页结构进行修饰和美化
3.行为:通过Js让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

 

1.2 CSS基本使用
一、定义
Css在国内被称之为级联样式表、层叠样式表、样式表,它的作用就是修饰当前网页中的HTML元素。
二、基本使用步骤
1.CSS与HTML可以看做是二门互相独立的语言,此时如果想用CSS来操作HTML那么就需要先将二者建立关系。
2.此时在HTML当中就准备了一个叫style的标签(它是一个双标签).在这个标签对之间就可以用来书写我们的CSS代码。常见的存放位置可以是head 标签里title标签下。
3.通过CSS的选择器找到我们想要操作的元素然给它设置样式(写在style标签之中)

 

1.3 体验CSS
1.常见的CSS元素属性:width定义元素宽度单位是px,height定义高度,background-color 设置背景颜色。
2.CSS代码书写的固定语法:

选择器{CSS代码}

3.建议大家在开发阶段将CSS样式分行写,且每行的结尾用;结束。

 

1.4 CSS选择器
一、定义
所谓的CSS选择器就是CSS中已经定义好的用来选中某些元素的固定语法。它的作用
就是选中我们想要设置样式的元素。
二、CS5选择器的分类
在CSS中有很多种选择器。我们人为的分成二大类:简单选择器+复合选择器。
三、简单选择器:
1.标签名选择器:通过具体的HTML标签名称来选择元素。【会将当前网页中所有叫该名字的标签都选中】
2.类名选择器:通过标签类名来选择元素
3.id 选择器:通过id名称选择元素。

 

1.5 类名选择器

一、为什么需要类名选择器
一个完整的网页需要很多标签组合在一起进行编写实现,因为HTML标签的种类有限,所以同名的一个标签有可以会在一个网页中出现多次。此时如果想对这些同名的标签分别设置不相同的样式。那么直接使用标签名选择器就没有办法实现。这种情况下我们就可以使用类名选择器。
二、类名选择器的基本使用步骤
1.定义HTML网页结构.然后在我们想选中的元素身上设置class 属性。
2.将我们想要一起选中的元素们身上设置相同的class 属性值(类名)
3.此时我们只需要在style标签中按着固定的语法来调用我们的类名:类名

 

1.6  ld 选择器
一、为什么需要id选择器
如果我们只想从一堆元素当中选中其中的某一个元素,那么就可以使用id选择器。这个id就和人的身份证号是一样的。
二、Id 选择器使用
1.在我们想要选中的元素身上设置一个id属性。
2.给这个id属性设置一个值,我称为d名。
3.在style当中通过固定的语法来进行调用:#id名0
4.注:要求在一个网页当中不能出现同名的id值【虽然有效果但也不能这么做】

 

1.7 简单选择器总结
1.标签名选择器和类名选择器默认可以一次性选中多个元素,id名选择器一次只能选中一个元素。
2.一个标签的身上可以既具有类名又具有id名,且这二个属性值是可以相同的。
3.允许一个标签的身上同时设置多个类名,要求多个类名之间用空格隔开。
4.关于id选择器要求一个页面当中同一个id名称只能出现一次。

 

1.8 id名与类名命名规则
1.名称不能是纯数字或者以数字开头(但是我们经常会以数字结尾)
2.名称不能使用中文
3.名称包含特殊字符()
4.起名字时要做到见名知意

 

3、CSS基本介绍

标签:code   完整   分离   背景颜色   分行   样式表   规则   标准   1.2   

原文地址:https://www.cnblogs.com/zhuifeng-mayi/p/9797245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!