2020-02-23

css基础
css（cascading style sheet） 汉译 层叠样式表作用：设置（修饰）HTML里的标签样式的css是依附于HTML的基础上，来进行显示的。
通俗的来说，Html是一个结构框架。光秃秃的则不好看
而cfs就是给html穿衣服的一个样式。
这个时候就显得css尤为重要。

CSS语法的说明:css是由两部分组成的，一部分是选择器，一部分是声明（属性和属性值）；
语法上的标点符号都是英文输入法下的标点符号；
选择器:
1、类型选择符：尖角号里面的第一个单词，可以直接当做类型选择符使用。div、p、body、h1、a、strong…
用法：（1）如果想改变某个元素的默认样式时，可以使用类型选择符；（如：改变一个p段落样式）
（2）当统一文档某个元素的显示效果时，可以使用类型选择符；（如：改变文档所有p段落样式）
2、ID选择符： 唯一性；

#id名{ 属性：属性值； } 最大的用处：创建网页的外围结构；指的是要定义样式的对象（HTML里的标签），可以是一类元素，也可以是指定名称的元素；说白了就是帮助我们去找要找的那个对象（标签）的。属性和属性值之间要用冒号连接，属性和属性之间要用分号分隔；当一个属性有多个属性值得时候，属性值和属性值要用空格隔开，不分先后顺序。 在书写样式过程中，空格、换行等操作不影响属性显示。声明要写在{}里面的，是用来修饰选择符 3、class选择符（类选择符） .class名{} .main{} div.main{}

4、群组选择符： 作用：提取同分类项；可以吧具有相同属性的选择符，用逗号隔开的形式组成一组 例如:#top,#banner,.main,#bottom{width:1000px;margin:0 auto;} 5、包含选择符： 通过祖先级元素去找子元素，中间用空格隔开；如：.main li{};找的是当前元素下的所有的子元素。 6、通配符： * 代表着页面上所有的标签； 例如:*{margin:0;padding:0;} 控制全局样式的 让页面上所有的元素都清除一遍默认的外边界和填充值；margin：外边界 padding：填充值; 7、伪类选择符： 超链接的四个状态: 1初始状态:link{} 2鼠标访问过后的状态:visited{} 3鼠标滑过状态:hover{} 4鼠标激活状态,鼠标按下去没松开的那个状态:active{} 说明：:link{} :visited{} :active{}，前三个一般都是用在超链接标签上的。 :hover{} 除了可以用在超链接上，他还可以给其他的元素添加。 1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效； 2）为了简化代码，可以把伪类选择符中相同 的声明提出来放在a选择符中； 例如：a{color:red;} a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标划过变化颜色 一般情况下我们会把初始状态和访问过后的状态，设置成一样的效果。因为谷歌浏览器一但访问过后，就回不到初始状态了。 8、子选择符：选择符1>选择符2{} 找的是当前元素里的第一级子元素。 css样式表的创建： 1) 内部样式表：创建在HTML页面内部的； 建议使用link方法； 写在head区域里； 作用域：网站里的其他页面都可以引用； 层叠性：css的特性，不管是外部还是内部或者内联都可以对当前的元素设置样式，当样式发生冲突的时候，会选择权重较高的那个样式来显示自己，当没有冲突的时候，那么这个元素就都可以把这些样式叠加显示出来。