看关于web前端 记录下一些关于css的了解 正在学习中
CSS实例
以分号；结束，以大括号{}括起来
p
{
color:red;
text-align:center;
}
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
一、css的认识
css：层叠样式表，负责页面的样式
早期是由标签的属性来决定标签的样式，缺点是，导致浏览器比较麻烦，对写代码的人人来说比较难维护。
用法
1.内联样式:
<div style="样式"></div>
2.内部样式css可以把与外观相关的属性全部合并到样式style里。不需要改很多东西。
<style>选择器{
样式
}
</style>
3. 外部样式将css和html做了一个分离。html里只放标签，css里面只放样式。通过link标签将它俩建立连接。
二，CSS的语法*
选择器和声明组成
1.选择器：通过选择器可以找到html的元素，将样式传递给html。
基本选择器：
通配符选择器：*指所有的html元素
*{
border： 1px solid black；
}
给所有的内容加上外边框
标签选择器：
div{
border： 1px solid black；
}
所有用div标签的会被加上外边框
id选择器 ：以#开头；具有元素唯一性。元素之间的id不能相同。
<p id="txt">文字</id>
#txt{
font-size：60px
}
将 文字 变大
class选择器：.代表class；不具有唯一性。
<p class="txt1 txt2">p1</p>
.txt1{
font-size: 100px;
}
.txt2{
color: red
}
将p1变大变红
2.声明：
{
width：属性；
height: ;
background: ;
}
3.注释：/*注释*/
4.颜色：
三种方式
color: rgb(数字，数字，数字）；rgb色彩模式；R:红色；G:绿色；b：蓝色；颜色由浅到深（0-255)
直接写名称：red；
16进制 ： #ff0000；
三、CSS原理
优先原则:后解析的内容会覆盖掉之前解析的内容。
1.同一个选择器：从上往下执行
2.同一类型的选择器：从上往下执行
3.不同类型的选择器：先解析低优先级的在解析高优先级的（div<class<id）最终会生效的是高优先级的。
4.内部样式和内部样式合并之后做解析
先外部样式后解析内部样式。
外：
内：
表现出来的：
5.内联样式：当外部样式和内部样式解析完的时候才解析内联样式。
6.加important的最后执行
继承原则：嵌套里面的标签会拥有外部标签的样式。子元素会继承父元素的一些样式。
1.跟文字相关的可以被继承，其他的不可以被继承
2.块级元素，如果不被设置宽度，则他可以继承最接近的的父级元素的宽；高是由内容决定的。
四、组合选择器
把基本选择器通过特殊符号串在一起组成组合选择器。
1.分组选择器：div,p,ul
2.嵌套选择器：空格隔开 嵌套在第一个标签里面的才可以
3.子选择器：> 如：div>p;需要div是p的父标签才会生效
4.相邻的，同级别的选择器：如：div+p 会生效的是跟div平一级p
属性选择器
基本s[属性]
[属性=值] 完全对应
<p title="dog">柯基</p>
p[title=dog]{
background: red;
font-size: 50px;
}
[属性~=值]空格隔开，只要属行中包含dog的都可以，像dog1 就不可以
<p title="dog two">柯基</p>
p[title~=dog]{
background: red;
font-size: 50px;
}
[属性^=值]开始,只要里面包含dog的都可以
像dog one可以
<p title^="dog2">柯基</p>
p[title^=dog]{
background: red;
font-size: 50px;
}
[属性$=值]结束,以cc结束的才可以
<p title$="dog cc">柯基</p>
p[title$=cc]{
background: red;
font-size: 50px;
}
伪元素选择器
每一个标签会加上俩伪元素
开始：before
结束：after
<p title="dog">柯基</p>
p::before {
content: "before";
}
p::after {
content: "after";
}
针对块级元素
第一个字母：
p::first-letter {
color: blue;
} 对第一个字母做修饰
第一行：
p::first line {
color: blue;
} 对第一行做修饰
伪类选择器
对状态做改变
背景
body{
background-img：url（‘图片地址’）； 全部平铺
background-repeat： repeat-x； 沿着x轴平铺
background-repeat： no-repeat； 不平铺
background-position：100px 100px； 将这一张图片放在离页面x轴100像素，离y轴100px的地方
background-position：50% 0%； 将图片移动到x轴的一半处，y轴不变
background-attachment：fixed； 页面滚动，但背景图不动
}
以上可等于：
body{
background: color image repeat attachment;
}
字体
body{
font-family: "宋体","黑体"； 将文本变为宋体，如果系统内没有宋体将会把文本变黑体
font-size: "100px"; 设置字体大小
font-weight：100； 100-900；设置字体粗细
font-style: italic; 设置字体样式；将字体设置为斜体
}
简便写法：
font： style weight size/line-height（字行间的高度）font-family；
用简便写法的话，必须设置size，family；
文本
p{
color：red； 字体的颜色
letter-spacing：10px； 字母之间的距离
word-spacing: 10px; 字符之间空格的距离
direction： ltr； 将文本从左到右
text-decoration：line-through； 线从字中间穿过
overline；线在字的顶端
underline； 线在字的底端
text-align： left; 将文字左对齐
right； 文字右对齐
center； 文字居中
justify；两端对齐
width： 250px；
text-indent： 60px； 文字缩进
text-transform： uppercase；全大写
lowercase; 全小写
capitalize; 首字母大写
width： 250px； 设置宽度
white-space: nowrap; 取消换行
overflow: hidden; 将多余的文字隐藏
text-overflow:clip; 默认
text-overflow: ellipsis; 将多余文字转化为省略号
}
img{
width：200px； 设置图片宽度
vertical-align： top center bottom；垂直对齐 将文字放在顶上，中间，底部
float： left； 将文字在左边围着图片
}
链接
a{
color： red; 文字颜色
}
a：link{
color: blue; 初始状态
}
a：visited{
color: yellow; 被访问时候的状态
}
a: hover{
color: red; 鼠标移动到链接的状态
}
a: active{
color: green; 点击时候的状态
}
列表：
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
</body>
ul{
list-style-type: ;
none 不使用项目符号
disc 实心圆
circle 空心圆
square 实心方块
}
ol{
list-style-type: ;
demical: 阿拉伯数字
lower-alpha: 小写英文字母
upper-alpha: 大写英文字母
lower-roman: 小写罗马数字
upper-roman: 大写罗马
}
加图片
li{
background-image: url("图片地址");
background-repeat: no-repeat; 不平铺
height: 50px; 设置高度
padding: 25px； 将图片移动25px
}
盒子模型
里面的元素
内容
内边距
外边距
929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
