今天继续CSS的学习 以下是学习的内容
ID选择器 ID名称唯一不可重复
在中添加以下内容
<body></body>中 有如下代码
<p id=”text”>Hello</p>
合并选择器
<body>
<p>文本1</p>
<h3>文本2</h3>
</body>
使上述两个文本样式相同只需要在<head></head>中添加
<style>
p，h3{
font-size:30px
color:red;
}
</style>
选择器优先级
行内>id>类>元素
字体属性
color 规定文本颜色 以下四种方式
color:red;
color:#ff0000; （推荐）
color:rgb(255,0,0);
color:rgba(255,0,0.5);
font-size 设置文本大小 最小为12px
font-weight 规定文本粗细
值：
bold 定义粗体
bolder 定义更粗体
lighter 定义更细体
100-900 定义由细到粗 400相当于默认大小 700相当于bold
font-style 字体样式
值
normal 默认值
italic 定义斜体字
font-family 规定元素字体 每个值用逗号分开 字体若有空格需加上引号
font-family :”微软雅黑”；
背景属性
主要有五个
background-color 背景颜色
background-image 背景图片
background-position 背景图片显示位置
left top 左上角
left center 左中
left bottom 左下
right top 右上
right center 右中
right bottom 右下
center top 中上
center center 中中（常用）
center bottom 中下
x% y% 左上角 0% 0% 右下角100% 100%
xpos ypos
background-repeat 背景图片如何填充
background-size 背景图片大小属性
<head></head>中添加一下代码
<style>
.box1
{
width:400px;
height:400px;
background-color:#ffff00;
}
.box2
{
background-image :url(“照片路径”);
background-repeat:repeat-x;(x为水平重复 y垂直重复 no-repeat为不重复)
background-size:1200px 1200px; //或100% 100%或cover（充满全屏有切割） 或 contain（无切割 尽量全屏）
}
</style>
<body></body>中有如下代码
<div class=”box1”></div> //这里用了类选择器
<div class=”box2”></div>
文本属性
text-align 指定元素文本的水平对齐方式
值
left 居左
right 局右
center 局中
text-decoration
值
underline 下划线
overline 上划线
line-through 删除线
text-transform 控制文本大小写
captialize 定义每个单词开头大写
uppercase 定义全部字母大写
lowercase 定义全部字母小写
text-indent 规定文本块中首行文本的缩进
p{
text-indent:50px;
}
负值是允许的
明天将开始学习表格属性等内容
浙公网安备 33010602011771号