CSS从基础到高级

最新推荐文章于 2024-09-24 15:55:35 发布

qq_25133905

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量231

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_25133905/article/details/73381969

版权

CSS

CSS层叠样式表,是一种对html标签的修饰,样式就是html以何种形式展现在浏览器中,比如可以通过改变span标签的color样式,来改变span标签在浏览器中显示的字体颜色

使用css样式,有三种方式
*内联式
通过<style>标签,在style标签中,写的就是css的样式代码
它的type属性,就是告诉浏览器,我这下面就是css代码,也就是对html标签的修饰

p{
    color:pink;
    }
    p就是选择器
    {}大括号所包含的内容,叫做声明
    color就是属性
    pink就是值

*外联式
导入css文件到当前这个html文档中
这样当前这个html文档中的代码,就可以使用.css文件中的定义样式
导入文件有两种方式

在<style>标签中 @import url(css文件);
通过link标签,也可将css文件导入到html文档中
rel:表示被连接的文件是用来做什么的

 <link href = "css文件地址" rel = "stylesheet" 
     type = "text/css">

*内联式
将css样式代码,直接写在标签的style属性中
<p style="color:pink;font-size:16px;"></p>

css的各种选择器

div{}
标签选择器
会作用与所有div标签

.classDemo{}
类选择器
可以通过标签的class属性指定,指定了class属性的选择器为classDemo的标签,就会有classDemo选择器中的样式,classDemo就是类选择器的名字,可以随便起

#idDemo{}
id选择器,通过#符号指定,idDemo就是id选择器的名字,id属性值为idDemo的标签,就会拥有idDemo这个选择器中声明的样式
因为id属性在html文档中是唯一存在的,所以id选择器只会作用于一个标签,而类选择器可以被多个标签使用
id属性一般是留给写js的人使用的,写js的程序员可以通过id属性找到对应的标签,然后通过一系列方法去操作这个标签,所以写html页面的时候基本用的就是类选择器,而不是id选择器.

div<span{}
子选择器
div标签的第一阶段的span子标签的样式

div strong{}
后代选择器
只要div的后代中有strong这个标签,就可以使用后代选择器里面的样式

div,p{}
组合选择器
div标签和p标签,都可以使用选择器中的样式

*{}
通用选择器(所有选择器)
优先级最低

a:hover{}
伪类选择器

权重值

就近原则:谁离标签近,那么,就使用那个选择器

什么叫权值?
权值用来标识css选择器的优先顺序,当多个选择器同时作用于一个标签时,应该听谁的
内联式>嵌入式
内联式>id选择器>类选择器>标签选择器
具体权值为:
内联选择器:1000
id选择器:100
类选择器:10
标签选择器:1

使用css编辑网页文本

在css样式中
字号:font-size:30px;
字体:font-family:"宋体";
英文字体的兼容性比中文字体好一些
如果使用的字体,浏览器不支持,那么就会使用浏览器默认字体
字体颜色:color:pink;
各种线:text-decoration:line-through;
字体样式:font-style:italic;斜体,黑体等

段落的排版:
首行缩进30个像素
text-indent:30px;
2倍行距
也可以使用20px使用像素单位
line-height:2em;
文字横向间距
letter-spacing:10px;
单词横向间距
word-spacing:20px;
居中
text-align:center;

设置超链接访问样式

超链接被访问前样式:
a:link{};
超链接被访问后的样式
a:visited{};
鼠标悬浮在超链接之上的样式
a:hover{}
鼠标按下超链接的样式
a:active{}
*必须按照顺序写

设置背景颜色,背景图片

列表样式

ul.a{
<!--a是ul的类属性值-->
    list-style-image:url("图片地址");
}

演示结果就是无需列表的黑点,变成了图片

ol.b{
<!--b是ol的类属性值-->
    list-style-type:armenian;
}

演示结果就是把有序列表的1,2,3编程了文字一,二,三

元素类型

主要分成三类
块状元素,内联元素,块状内联元素
块状元素:不能与其他元素同处一行,可以设置宽高,上下外边距等.
内联元素:可以与其他元素同处一行,不可以设置宽高,上下外边距等,但是可以设置左右外边距
块状内联元素:可以与其他元素同出一行,可以设置宽高,上下外边距等,
块状元素可以设置display样式为inline-block成为块状内联元素

<!--块状-->
    <div style="background-color: #dca7a7">
        我是div
    </div>
    <div style="background-color: #5cb85c;width: 300px">
        我是设置了宽度的div
    </div>
<!--内联-->
    <span style="background-color: #f5e79e;
    padding-top: 10px">我是span1</span>
    我是span2</span>
    <span style="background-color: #e7c3c3">
    我是内联元素</span>
<!--块状内联元素-->
    <div style="display: inline-block;
    background-color: deeppink;width: 600px">
        我是设置了display属性的div标签,我已经被改成了内联块状元素
    </div>