网站推广有哪些方式,群晖系统可以做网站吗,移动网站建设口碑好,建立网站tk一、元素及属性
CSS 是为 web 内容添加样式的代码。 style标签
1.语法
1.除了选择器部分#xff0c;每个规则集都应该包含在成对的大括号里#xff08;{}#xff09;。 2.在每个声明里要用冒号#xff08;:#xff09;将属性与属性值分隔开。 3.在每个规则集里要用分号…一、元素及属性
CSS 是为 web 内容添加样式的代码。 style标签
1.语法
1.除了选择器部分每个规则集都应该包含在成对的大括号里{}。 2.在每个声明里要用冒号:将属性与属性值分隔开。 3.在每个规则集里要用分号;将各个声明分隔开。 4.选择多个元素,将不同的选择器用逗号分开。
p1,
p2,
p3 {color: red;width: 500px;border: 1px solid black;
}二、CSS组成
1.外部样式表
使用 HTML 元素来链接外部样式表文件 元素的 href 属性需要引用你文件系统中的一个文件。 headmeta charsetutf-8 /titleCSS外部样式/titlelink relstylesheet hrefxxx/xxx/styles.css //head外部styles.css如下
h1 {color: blue;background-color: yellow;border: 1px solid black;
}p {color: red;
}
2.内部样式表
把 CSS 放置在包含在 HTML 元素中的 headmeta charsetutf-8 /titleCSS内部样式/titlestyleh1 {color: blue;background-color: yellow;border: 1px solid black;}p {color: red;}/style/head3.内联样式(不推荐)
内联样式是影响单个 HTML 元素的 CSS 声明包含在元素的 style 属性中。 h1 stylecolor: blue;background-color: yellow;border: 1px solid black;Hello World!/h1p stylecolor:red;CSS内联样式/p二、CSS优先级 p我是什么颜色/pp {color: yellow;
}
.test-color {color: red;
}优先展示 .xxx , 这里文字为红色 p我是什么颜色/pp {color: blue;
}
p {color: yellow;
}优先展示最后申明 , 这里文字为黄色
三、CSS选择器
1.类型选择器h1/span/p
类型选择器有时也叫做标签名选择器或者是元素选择器。
2.全局选择器 ( * )
全局选择器是由一个星号*代指的
3.类选择器 ( . )
类选择器以一个句点.开头 可继承 p classnotebox我的网页/pp classnotebox warning我的网页/pp classnotebox danger我的网页/p.notebox {width: 100px;border: 4px solid #666;padding: 5px;
}.notebox.warning {border-color: orange;font-weight: bold;
}.notebox.danger {border-color: red;font-weight: bold;
}4.ID 选择器 ( # )
ID 选择器开头为#而非句点 p idone我的网页/pp idtwo我的网页/pp idthree我的网页/p#one {color: blue;
}
#two {color: green;
}
#three {color: red;
}li class我的网页/li li classone我的网页/lili classtwo我的网页/lili[class] {color: blue;
}li[classone] {color: yellow;
}li[classtwo] {color: red;
}四、盒子
1.盒子组成
内容盒子显示内容的区域使用 inline-size 和 block-size 或 width 和 height 等属性确定其大小。内边距盒子填充位于内容周围的空白处使用 padding 和相关属性确定其大小。边框盒子边框盒子包住内容和任何填充使用 border 和相关属性确定其大小。外边距盒子外边距是最外层其包裹内容、内边距和边框作为该盒子与其他元素之间的空白使用 margin 和相关属性确定其大小。
2.外边距 margin
我们可以使用 margin 属性一次性控制一个元素的所有外边距或者每边单独使用等价的普通属性控制
margin-top
margin-right
margin-bottom
margin-left根据外边距相接触的两个元素是正边距还是负边距结果会有所不同
3.外边距折叠
相邻兄弟元素当两个块级元素上下相邻且没有边框、内边距或内容分隔它们时它们的垂直外边距会发生折叠合并为一个较大的外边距。父元素与子元素当一个块级元素包含另一个块级元素作为其直接子元素时如果父元素没有边框、内边距或内容则父元素的底部外边距和子元素的顶部外边距可能会发生折叠。负外边距当一个元素的外边距是负值时它会尝试与其他元素重叠。在这种情况下外边距折叠的结果可能是零或者更小的正值取决于其他元素的外边距大小。清除浮动使用 clear 属性可以阻止外边距折叠因为这会在元素周围创建一个新的块格式化上下文。表格单元格表格单元格的外边距不会折叠。行内元素行内元素的外边距不会与其他元素的外边距折叠
4.内边距 padding
每个边框都有样式、宽度和颜色 我们可以使用 padding 简写属性一次性控制元素所有边或者每边单独使用等价的普通属性
padding-top
padding-right
padding-bottom
padding-left5.边框 border
可以使用 border 属性一次性设置所有四个边框的宽度、颜色和样式。
欲分别设置每边的属性可以使用
border-top
border-right
border-bottom
border-left欲设置所有边的宽度、样式或颜色可以使用
border-width
border-style
border-color欲设置单条边的宽度、样式或颜色可以使用最细粒度的普通属性之一
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color6.背景与边框
1.背景颜色
background-color: #567895;
background-color: black;
background-color: rgb(255 255 255 / 50%);2.背景图片 background-image: url(1.jpg); background-repeat 属性用于控制图像的平铺行为。可用的值是
no-repeat——阻止背景重复平铺。 repeat-x——仅水平方向上重复平铺。 repeat-y——仅垂直方向上重复平铺。 repeat——默认值在水平和垂直两个方向重复平铺。
使用 background-size 属性它可以设置长度或百分比值来调整图像的大小以适应背景。 cover浏览器将使图像足够大使它完全覆盖了盒子区域同时仍然保持其宽高比。在这种情况下图像的部分区域可能会跳出盒子外。 contain浏览器会将图像调整到适合框内的尺寸。在这种情况下如果图像的长宽比与盒子的长宽比不同你可能会在图像的两边或顶部和底部出现空隙。
background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。 background-position: top center;background-position: 20px 10%;background-position: 20px top;background-position: top 20px right 10px;3.多个背景图像
background-image: url(1.png), url(2.png);4.边框
.box {border-width: 1px;border-style: solid;border-color: black;
}简写
.box {border: 1px solid black;
}.box {border-top-width: 1px;border-top-style: solid;border-top-color: black;
}5.圆角 .box {border-radius: 10px;
}7.display 属性布局
在 css 中实现页面布局的主要方法是设定display属性的值。
display:block
display:inline
display: flex
display: grid1.横向布局默认 divp classborderbox1/pp classborderbox2/pp classborderbox3/p/div.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}2.竖向布局 display: flex div classwrapperp classborderbox1/pp classborderbox2/pp classborderbox3/p/div.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}.wrapper {display: flex;
}3. 填充容器 flex: 1
们可以在我们的所有子元素上添加flex 属性并赋值为1这会使得所有的子元素都伸展并填充容器而不是在尾部留下空白如果有更多空间那么子元素们就会变得更宽反之他们就会变得更窄。 div classwrapperdiv classborderbox1/divdiv classborderbox2/divdiv classborderbox3/div/div.wrapper div {flex: 1;
}
.wrapper {display: flex;width: 800px;
}4. 网格布局 Grid div classwrapperdiv classborderbox1/divdiv classborderbox2/divdiv classborderbox3/divdiv classborderbox4/divdiv classborderbox5/divdiv classborderbox5/divdiv classborderbox5/divdiv classborderbox5/div/div.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr; /*1fr等于自由空间的一份*/grid-template-rows: 50px 50px; /*指定每行的高度这个设置的行数是2*/grid-gap: 10px; /*网格单元之间的间隙大小*/
}div classwrapperdiv classborder box1box1/divdiv classborder box2box2/divdiv classborder box3box3/div/div.border {border: yellow 10px solid;background-color: yellow;border-radius: 10px;
}
.border.box1 {grid-column: 2 / 4;grid-row: 1;
}
.border.box2 {grid-column: 1;grid-row: 1 / 3;
}
.border.box3 {grid-row: 2;grid-column: 3;
}5. 浮动 float
这一元素会浮动到左侧或右侧 div classboxFloat/divp内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容/p.box {float: left;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏以便可以看到阴影*/
}.box {float: right;width: 200px;height: 200px;margin: 10px;background-color: #e99;overflow: auto; /*将溢出隐藏以便可以看到阴影*/
}
