个人网站建设存在哪些问题,长沙人才招聘网,福州室内设计公司排名,源码之家的模板怎么用CSS基本语法规则#xff1a;选择器若干属性声明
style标签#xff1a;可以放到代码的任意位置处#xff0c;head/body中都可以
三种写CSS的方式#xff1a;
1、内部样式#xff1a;使用style标签#xff0c;直接把CSS写到html文件中。此时的style标签可以放到任何位置…CSS基本语法规则选择器若干属性声明
style标签可以放到代码的任意位置处head/body中都可以
三种写CSS的方式
1、内部样式使用style标签直接把CSS写到html文件中。此时的style标签可以放到任何位置一般建议放到head标签里。【下面的p就是选择器{}里面的是属性键值对】 stylep{color:red;font-size: 30px;}/style
2、内联样式使用style属性针对指定的元素设置样式。此时不需要写选择器直接写属性键值对这个时候样式只针对当前元素生效【内联样式的优先级内部样式】 p stylecolor:green;font-size: 30px;段落/p
3、外部样式把CSS代码单独作为一个.css文件通过link属性让html引入该css文件
实际开发中外部样式用的最多
p{color:blue;font-size: 100px;
}link relstylesheet hrefstyle.css
CSS选择器
1、标签选择器在 { 前面写标签名字。此时意味着会选中当前页面中所有的指定标签。
2、类选择器 更好的选择。可以创建CSS类手动指定哪些元素应用这个类。
CSS的所谓的“类”就是把一组CSS属性起了个名字方面别的地方引用。
【定义类时需要使用 . 开头】【引用这个类时通过class属性 “类名” 即可不需要带 . 号】 style/* 此处定义了一个CSS类名字叫one *//* CSS类名定义的时候需要使用 . 开头*/.one{color: red;}.two{color:blue;}.three{color: yellow;}.four{font-size: 30px;}/style!-- 引用时直接使用类名 --p classone four这是第一个段落/pp classtwo这是第二个段落/pp classthree这是第三个段落/p 3、ID选择器html页面中的每个元素都是可以设置一个唯一的id作为元素的身份标识的。
给元素安排id之后就可以通过id来选中对应的元素了。注意一个页面内只能有唯一的id。 style#first{color: black;font-size: 50px;}/stylediv idfirst这是一个div/divdiv idsecond这是另一个div/div 4、后代选择器把多个简单的基础选择器组合一下可以是标签、类、id 选择器的任意组合
下面的含义就是先找到页面中所有的ul然后在这些ul里再找所有的li
注意li只要是ul的后代即可不一定非得是“子元素” 子元素子孙元素等等都行。 styleul li{color: red;}/styleolliaaa/lilibbb/liliccc/li/olulliaaa/lilibbb/liliccc/li/ul style.a li{color: red;}/styleolliaaa/lilibbb/liliccc/li/olul classaliaaa/lilibbb/liliccc/li/ul 5、子选择器也是把多个简单的基础选择器组合标签、类、id选择器任意组合
但它只找匹配的子元素不找孙子元素之类的 选择器1选择器2{ 属性...... } 6、并集选择器多组选择器用了同样的样式 选择器1选择器2{ 属性...... } 7、伪类选择器符合选择器的特殊用法
前面的选择器是选中某个元素伪类选择器是选中某个元素的某个特定的状态
:hover 鼠标悬停时候的状态
:active 鼠标按下时候的状态 style.c:hover{color: red;}.c:active{font-size: 50px;}/stylediv classc哈哈哈哈/div 常用属性
元素开始标签结束标签和内容就是一个完整的元素
width设置元素宽度即定义元素内容区的宽度
height设置元素高度即定义元素内容区的高度
一、字体属性
1、font-family 当前使用哪种字体显示 这个属性指定的字体必须是系统已经安装了的
2、font-size 设置字体大小
3、font-weight 设置字体粗细 有两种典型的设置风格1、使用单词 2、使用数字 4、 font-style 设置文字倾斜 一个div就可以打天下搭配CSS就可以实现前面各种标签的效果个别 表单标签 实现不了
二、文本属性
1、color 文本颜色
前端中给RGB各分配了一个字节每个字节的范围0-255/00-FF计算机里的典型表示
通过这三个分量不同比例的搭配就可以调和出不同的颜色
1使用十进制 color: rgb(0,255, 0);
2使用十六机制 color: #00ff00;
3直接使用表示颜色的单词一般用的不多
2、text-align 文本对齐靠左left靠右right居中center
3、text-decoration 文本装饰下划线underline、上划线overline、删除线line-through、去掉下划线啥的 none
4、text-indent 文本缩进
如每个段落首行缩进2个文字 text-indent: 2em;
px像素相当于是一个“绝对”的量
em是以文字尺寸为基础来设置的是一个“相对”的量
缩进可以是负的表示向左缩进
5、line-height 行高
行高 文字高度 行间距通过行高确定行间距
三、背景属性
1、background-color 背景颜色
2、background-image: url(图片路径); 背景图片 默认是平铺的
3、background-repeat: no-repeat; 背景不平铺
4、background-position: center center; 设置图片的位置topbottomcenterleftright
还可以使用坐标去设置具体位置行坐标和纵坐标坐标系是在左上角
如background-position:50px,30px;
4、background-size 设置背景图的尺寸
宽和高 background-size: 1000px 500px;
contain把图像图像扩展至最大尺寸在图像完全存在的基础上最大限度适应内容区域
background-size: contain;
cover把背景图像扩展至足够大以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size: cover;
四、圆角矩形 border-radius: 10px; 设置圆角矩形
生成圆形让 border-radius 的值为正方形高度的一半
生成圆角矩形让 border-radius 的值为矩形高度的一半
五、元素的显示模式
任何一个html标签的显示模式块级/行内都是可以设置的通过display来设置
display : block; 设置成块级元素
display : inline; 设置成行内元素 块级元素和行内元素的区别 1、块级元素会独占一行行内元素不独占一行。 2、块级元素的高度宽度内外边距都是可以设置的。行内元素的高度宽度行高设置无效。内边距有效外边距时有时无。 3、块级元素默认宽度和父元素一样宽。行内元素默认宽度和里面的内容一样宽。 六、CSS盒子模型
描述了html元素的基本布局规则【内容 内边距 边框 外边距 】
设置边框要设置三个方面边框的粗细边框的颜色边框的风格实线solid虚线dashed其他的线
1、border 属性直接设置了四个方向 border: 5px black solid;
border-left
border-right
border-top
border-bottom
这些可以分别设置一个方向
边框默认情况下会撑大盒子width 和 height 表示的是 内容部分 的尺寸
使用 box-sizing: border-box; 该属性边框将不会撑大盒子。
2、padding 内边距设置的是内容和边框之间的距离
padding:10px; 表示四个方向都是10px
padding:10px 20px; 表示上下边距是10px左右边距是20px
padding:10px 20px 30px 40px; 表示上右下左顺时针
分别设置
padding-left
padding-right
padding-top
padding-bottom
3、margin 外边距设置的是元素和元素之间的距离
margin 的写法和 padding 的写法大差不差。
margin 特殊用法把margin-left 和 margin-right 设置成auto让浏览器自动调节此时该元素就能够在父元素内部水平居中。实现了元素的水平居中。
七、弹性布局
用来实现页面布局的即控制某个指定元素放到指定位置上
解决“水平方向排列”问题。
width:100%; 相对父元素它的宽度是多少。
属性
1、开始弹性布局
给要水平排列的元素的父元素设置 display:flex;
此时弹性容器里面的元素不再是“块级”或“行内”元素了而是“弹性元素”遵守弹性布局可以设置尺寸和边距。
2、设置这些元素的的水平方向的排列方式 justify-content: flex-start; 靠左排列 justify-content: flex-end; 靠右排列 justify-content:center; 居中排列 justify-content:space-around; 等间距排列两端还有间距 justify-content:space-between;等间距排列
3、设置元素垂直方向的排列
align-items: flex-end;
align-items: flex-start;
align-items: center;
