02-CSS基本样式与元素选择器

1.html是结构,css是样式
html中的注释<--  -->
css中的注释/*  */

2.css引入方式分为行内样式(内嵌),内部样式(内联),外部样式(外链)
1)行内样式
eg.
<div style=""><div>
不能复用
2)内部样式
<head>
      <style>
      </styLe>
</head>
复用性不强
3)外部样式
<head>
      <link rel="stylesheet" href="css/index.css">
</head>
通过link标签链接css文件,多用在项目中,按住ctrl点击css文件检验链接成功

3.css基本选择器以及权重
1)通配符
*
2)标签选择器
div
3)类选择器
.class
4)多类名选择器
div.class.box
5)id选择器
#id
6)!mport
优先级如下:
!import>id>class>标签选择器>通配符
同权重下,以浏览器下方的为主

4.复合选择器(选择器最好不要超过3)
1)交集选择器
第一个为标签选择器,第二个为类选择器或者id选择器,且中间没有空格
2)并集选择器
选择器,选择器
3)后代元素选择器
eg.
ul li
找到空格前选择器ul选中元素的后代元素中的符合空格后选择器li要求的所有元素
4)子代元素选择器
eg.
ul>li
找到大于号前选择器ul选中元素的子代元素中符合空格后选择器li要求的所有元素
5)相邻元素选择器
选择器div+选择器p
找出div选择器选中元素中紧随其后符合p选择器的第一个元素
6)兄弟选择器
选择器div~选择器p
找出div选择器选中元素中紧随其后符合p选择器的所有元素

5.css语法
选择器{
      属性:属性值;
}

6.css基本样式
1)width宽
2)height高
3)background-color
4)margin-top(top/right/bottom/left上右下左)外边距
复合写法:margin:四个方向一样;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
margin:0 auto 块元素水平居中;
5)字体大小
font-size:所有浏览器最小12px,默认16px;
6)字体
font-family
7)颜色
color
8)txt_decoration:none;去除a标签下划线

7.color值的3种写法
1)颜色的单词
2)十六进制值6位(2位为一个原色红绿蓝值)
3)rgb/rgba
(0-2550-255.0-255.0-1)最后一位为透明度
发布了5 篇原创文章 · 获赞 0 · 访问量 80

猜你喜欢

转载自blog.csdn.net/Charley_Li/article/details/104832031