CSS

最新推荐文章于 2022-09-29 02:23:20 发布

crazy韩先森

最新推荐文章于 2022-09-29 02:23:20 发布

阅读量152

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/crazyhsl/article/details/111607459

版权

Html标签

标签的组成部分三种:

1.标签名 2.标签中的属性值 3.标签的文本内容

如<a href="www.baidu.com">百度</a>

select标签,常用于单选和多选,是一个组合标签,需要和子标签option一起搭配使用,不会独占一行

常用属性:

name属性:发送给服务器使用的

multiple属性:不与默认单选,取值为multiple表示多选,一般我们常用单选

size属性:可见选项的数目.

option标签:

select属性:表示勾选当前选项

value属性:用于发送给服务器的选项值.

注意事项:1.如果使用多选,那么选择的时候,需要按下ctrl键进行选择,

2.size属性一般情况下不去设置

3.selected属性不设置,默认选择列表中的第一个选项

4.value属性:如果不设置的话,发送给服务器的值是option的文本值,如果设置了value值,那么发送过去的就是value值,一般情况下都需要设置.

textarea标签:文本域

用于多行输入文本信息:

name属性:用于发送给服务器的名称

cols属性:用于指定文本域的列数

rows属性:用于指定文本域的行数

CSS样式:进行页面美化和布局控制

概念:Cascading Style Sheet 层叠样式表

层叠:多个样式可以作用在同一个HTML的元素上,可以同时生效.

好处:

1.功能比较强大 2.将内容展示和样式控制进行分离,降低了耦合度分工协作更方便,提高css样式的可复用性

使用:

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

1.选择器严格区分大小写,属性和属性值不区分大小写,
属性与属性之间使用分号隔开,最后一个属性可以省略不写,
如果一个属性有多个属性,多个属性属性之间用空格隔开,type属性可以省略不写.
2.如果一个标签有多个css样式控制,按照就近原则进行覆盖.
3.CSS样式的种类,有三种:行内样式,内联式,外链式, 行内样式>内联式>外联式 (就近原则)

常用的选择器

标签选择器，语法格式：标签名称{} 如对div标签控制，--->div{}
id选择器，语法格式：#id名称{},注意：id一般不能重复，需要给标签添加一个id属性
类选择器，语法格式：.class名称{},class名称可以重复，需要给标签添加class属性
并集选择器，语法格式：选择器1，选择器2，选择器3，... {}
属性选择器，语法格式：标签[属性="具体的属性值"]{}，比如：input[type="text"] --->username输入框设定样式

input[type="password"] --->控制password密码输入框设定样式

不太常用的选择器

后代选择器语法格式：选择器1 选择器2{} 浏览器加载样式的时候会首先找选择器1对应的标签在不在，如果存在会找选择器1里面的嵌套的的选择器2对应的标签。
子元素选择器语法格式：选择器1>选择器2{} 浏览器会加载选择器1下的所有子元素符合选择器2的条件
交集选择器，语法格式：选择器1选择器2{} 要求标签同时具备选择器1和选择器2，里面的css样式才会起作用
相邻兄弟选择器，语法格式：选择器1+选择器2{}
通用兄弟选择器，语法格式：选择器1~选择器2{}
选中同级别的第一个标签，语法格式：标签:first-child{}
选中同级别中同类型的第一个标签，语法格式：标签:first-of-type{}
选中同级别中同类型的第一个标签，语法格式：标签:last-of-type{}
选中同级别第几个标签，语法格式：标签:nth-child(n){}
选中同级别中同类型的第几个标签，语法格式：标签:nth-of-type(n){}

文本系列样式

用于设置文本相关的一些样式

font-style：设置文字样式，常用取值为斜体italic和正常normal
font-weight：设置文字的粗细，常用取值为light,lighter,bold和bolder。还可以使用数字表示 100~900
font-size：设置文字的大小，取值单位为像素px,如font-size：30px
font-family：设置字体，如"宋体","楷体","微软雅黑"等
font：进行连写，如：设置字体为宋体，字体大小为20px,字体为斜体，字体加粗 -->font:italic bolder 20px "宋体";
text-decoration：文本装饰属性，常用取值为underline下划线，overline上划线，删除线line-through, none什么都没有
text-align：水平方向的对齐方式，常用取值为left center right
text-indent：缩进方式 em作为缩进单位 2em相当于往里面缩进两个文字的宽度
color：设置文字的颜色，英语单词，rgb(值1，值2，值3)；#十六进制00~FF

背景系列样式：

设置标签的背景相关样式

background-color：设置标签的背景颜色
background-image：设置背景图像，它的属性值语法格式：url(相对路径);会自动平铺
background-repeat:设置平铺的方式，有四个值，repeat默认值，no-repeat不平铺，repeat-x水平平铺，repeat-y垂直平铺
background-position：设置背景定位方式，格式为：水平方向数值垂直方向数值,

水平方向有left center right 垂直方向有top center bottom,也可以是具体的像素值 100px 100px;\
background-size：设置背景图像的尺寸大小，尺寸大小可以使用百分比，也可以使用具体的像素值
background-attachment：设置背景的关联方式，常用的有两个scroll（会随着滚动条的滚动而滚动），fixed(不会随着滚动条的滚动而滚动)
连写-->background：颜色图片平铺方式定位方式... 中间可以任意写。