css笔记(更新中)

1.什么是css

层叠样式表
标记语言

2.css的作用

①增强控制网页样式
②样式与网页分离

3.css语法格式

选择器{
	属性1:属性值1;
	属性2:属性值2;
	.....
}

4.HTML中导入css的三种方式

1.)第一种方式内嵌样式

<style type="text/css">
        .选择器{
            属性1:属性值1;
			属性2:属性值2;
			.....
        }
        </style>

2.)第二种方式外链样式

<link rel="文档与被连接文档之间的关系" type="文档类型" href="被连接的文档路径">

3.)第三种方式行内样式

<标签名 style="属性1:属性值1;属性2:属性值2;"></标签名>

5.css选择器

1. 基本选择器
   ID选择器===>#+id的属性值
   class选择器===>.+class的属性值
   标签选择器===>标签名作为选择器
   通配符===>*表示所有标签

2. 层级选择器
   组合选择器:div,p逗号
   包含选择器:div p空格
   父子选择器:div>p大于
   兄弟选择器:div~p波浪线
   紧贴在div后的p标签:div+p加号

3. 匹配input标签中属性为name的采用样式:input[name]{ }
   匹配input标签中属性为name,并且以u结束的采用样式:input[name$=u]{ }
   匹配input标签中属性为name,并且以u开头的采用样式:input[name^=u]{ }
   匹配input标签中type属性的值中包含a采用样式:input[type*=a]{ }
   匹配input标签中type属性中的值有text单词的采用:input[type~=text]{ }
   匹配input标签中type属性值为password采用样式:input[type=password]{ }

4. div标签中第一行内容采用样式div:first-line{ }
   div标签中第一个字母采用此样式div:first-letter{ }
   在div标签之前添加内容+样式:div:before{content:'猪'; }
   在div标签之后添加内容+样式:div:after{content:'内容';color:green;font-size:100px; }

5. li标签中内容为空的采用此样式:li:empty{ }
   li标签中出了选择器为#one的都采用此样式li:not(#one){ }

6. ul的第一个儿子:ul li:first-child{ }
   ul的最后一个儿子:ul li:last-child{ }
   ul的唯一的一个儿子:ul li:noly-child{ }
   ul的第3个儿子:ul li:nth-child(3){ }
   ul的第奇数个儿子:ul li:nth-child(odd){ }
   ul的第偶数个儿子:ul li:nth-child(even){ }
   从下往上ul的第奇数个儿子li:ul li:nth-last-child(odd){ }
   从下往上ul的第偶数个儿子li:ul li:nth-last-child(even){ }
   从下往上ul的第4个儿子li:ul li:nth-last-child(4){ }

6.字体样式

font-size:40px;字体大小
font-weight:bold;加粗
font-family:'仿宋','楷体',字体族科
font-style:italic;字体样式倾斜
font-color:blue;字体颜色
简写

font:italic bold 40px ‘仿宋’;
font:样式 加粗 大小 族科

7.文本

text-indent:2em;首行缩进两个字符
line-height:1.5;行高
letter-spacing:5px;字间距
text-shadow:水平位置 垂直位置 模糊度 颜色;文本阴影

8.去除下划线

text-decoration:none;去除下划线
text-decoration:underline red;红色下划线